浮动导致父容器高度塌陷，应优先用 clearfix 伪元素清除；多列错位主因是 box-sizing；ie 兼容需 zoom: 1 触发 haslayout；现代方案推荐 display: flex 或 flow-root。
float 未清除导致子元素塌陷
父容器高度为 0，里面 float: left 的几个 div 看似排开了，实际脱离文档流，父容器“看不见”它们。这是最典型的症状，尤其在老 CMS 或 jQuery 插件生成的 HTML 里高频出现。
别急着加 overflow: hidden 或 zoom: 1 —— 这些是 IE6/7 的 hack，现代浏览器下可能意外截断阴影、溢出动画或 position: absolute 子元素。
- 优先用
::after伪元素清除：给父容器加class="clearfix"，配合 CSS 规则.clearfix::after { content: ""; display: table; clear: both; } - 如果父容器本身需要 flex 布局，直接上
display: flex，float自动失效，无需清除 - 注意：
display: flow-root是更干净的替代方案（Chrome 64+/Firefox 58+ 支持），它创建新的块级格式化上下文，天然包裹浮动子项，且不影响子元素定位行为
多列布局中 float 与 margin 叠加错位
比如三栏结构，每个栏设 float: left + width: 33.333%，但右边总缺一像素，或者最后一行被挤到下一行——这通常是盒模型 + 浮动累积误差所致。
根本原因不是“百分比算不准”，而是默认 box-sizing: content-box 下，padding 和 border 会撑大实际宽度，超出 100% 后触发换行。
- 统一加
* { box-sizing: border-box; }，这是重置的第一步，否则任何 padding 都可能让 float 失效 - 避免在浮动元素上同时用
margin-right和width: calc(33.333% - 20px)：calc 在旧版 Safari 中解析不稳定，且易和父容器的font-size: 0清除间隙方案冲突 - 若需等宽间隙，改用
flex的gap属性（现代浏览器）或负 margin + 内边距组合（兼容 IE11）
清除浮动后元素仍不占满父容器宽度
加了 clearfix，父容器有高度了，但子元素横向加起来还是不够 100%，右侧留白，inspect 发现空白其实是父容器的 padding 或字体默认 line-height 导致的行内间隙。
老代码常把 div 当作行内元素用（比如写成多行缩进格式），而 float 元素之间若有换行符或空格，在某些渲染模式下会被当作文本节点处理，产生不可见间隙。
- 检查 HTML 源码：浮动元素是否写在同一行？如
<div class="col">…</div> <div class="col">…</div>而非换行缩进 - 给父容器设
font-size: 0，子元素再单独设font-size: 16px—— 简单有效，但注意会影响子元素内所有文字，包括按钮、图标字体 - 更稳妥的是用
display: flex替代整个浮动结构：只需改父容器样式，子元素移除所有float、clear、width，用flex: 1或flex-basis控制比例
IE8–10 下 float 布局突然错乱
页面在 Chrome 正常，但在 IE9 文档模式下子元素堆叠、文字重叠、高度塌陷反复出现——这不是 bug，是 IE 对 hasLayout 触发逻辑极其敏感：缺少 zoom: 1、height、min-height 等任一条件，都可能导致浮动计算失败。
现代项目已不必强保 IE8，但如果必须支持，别信“加个 clear:both 就好”这种说法；IE 的浮动清理依赖于“触发 hasLayout”的具体方式，和标准浏览器完全不同。
- 对所有浮动父容器，强制加
zoom: 1（仅 IE 支持，其他浏览器忽略） - 避免在浮动元素上使用
display: inline-block：IE8 下会触发双重 hasLayout，造成外边距加倍 - 慎用
position: relative+float组合：IE9 下 relative 定位可能让浮动脱离预期位置，优先改用transform: translateX()微调
真正麻烦的不是怎么修 float，而是那些隐式依赖 float 行为的 JavaScript 插件——比如轮播图计算 offsetWidth 时假设元素在文档流中。重置布局前，先 grep 一遍 offsetWidth、getBoundingClientRect、clientHeight 的调用点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
