在 css float 布局里，一旦子元素全部设置浮动，父级容器就会因为无法感知浮动盒的高度而塌缩成零，导致背景、边框以及后续兄弟节点位置上移，出现高度不统一和重叠。要让父级自适应包裹浮动内容，核心思路是触发其重新建立包含浮动的计算上下文。
为什么父级会丢失高度
标准文档流中，块级父容器会顺着普通流子元素的高度自动撑开。但 float 的设计初衷是让元素脱离常规流，方便文字环绕，因此浮动元素不再占据父级原本的高度统计。父容器在渲染时只看到常规流里的空内容，于是计算高度为0，这就是所谓的高度塌陷。
这种行为并非 bug，而是 css 规范明确规定的表现。理解这一点很重要：清除浮动并不是把子元素拉回文档流，而是借助某些机制让父级重新包含浮动盒的边界。常见做法分为两类，一类是在浮动后插入清除节点，另一类是改变父级自身的格式化上下文。
空标签清除法
最直观的方式是在所有浮动子元素末尾放一个空块级标签，并设置 clear:both。浏览器遇到清除元素时会强制其下移，直到左右都不挨着浮动框，父级为了包裹这个清除元素，自然就把浮动高度算进去了。
代码示例：
<div class="parent"> <div class="box" style="float:left;width:100px;height:80px;"></div> <div class="box" style="float:left;width:100px;height:120px;"></div> <div style="clear:both;"></div> </div>
这种写法兼容所有浏览器，但空标签没有语义，后期结构改动容易遗漏，不符合结构与样式分离的原则，在组件化开发中维护成本偏高。
伪元素清除法
用 ::after 伪元素替代空标签，是目前最推荐的做法。给父级加上一段样式，让其在内容末尾生成不可见但具清除属性的块，既保留结构干净，又实现自适应高度。
代码如下：
.clearfix::after {
content: "";
display: block;
clear: both;
visibility: hidden;
height: 0;
}
使用时只需给父级添加 clearfix 类。该方案无额外 dom，兼容到 IE8 以上，是目前多数框架的标配。注意伪元素必须是 block 或 table 显示，inline 无法触发清除。
触发 BFC 方案
另一种思路是让父级形成块级格式化上下文（BFC）。BFC 容器会计算内部浮动元素的高度，因此设置 overflow:hidden 或 display:flow-root 都能解决问题。
示例：
.parent {
overflow: hidden;
}
/* 或 */
.parent {
display: flow-root;
}
overflow 写法简单，但可能裁剪阴影或下拉菜单；flow-root 语义最准确且无副作用，只是旧版浏览器不支持。实践中可结合伪元素做渐进增强。
方法对比与选择
下面用表格列出四种主流方式的差异：
| 方式 | 结构影响 | 兼容性 | 副作用 |
|---|---|---|---|
| 空标签 | 增加无语义节点 | 全部 | 难维护 |
| 伪元素 | 无 | IE8+ | 几乎无 |
| overflow | 无 | 全部 | 裁剪溢出 |
| flow-root | 无 | 现代浏览器 | 旧版不支持 |
如果项目需兼顾老旧环境，优先伪元素 clearfix；若只面向现代浏览器，display:flow-root 最干净。理解这些机制后，高度不统一的问题便能稳定解决。
css_floatclear_floatparent_height修改时间：2026-08-05 10:24:15