父容器高度塌陷是因浮动元素脱离文档流，导致父容器无法感知其高度；clearfix通过伪元素触发bfc并清除浮动，推荐写法为.clearfix::after{content:"";display:table;clear:both}。
为什么父容器高度会塌陷
浮动元素脱离文档流，导致父容器无法感知其高度，计算高度时直接忽略所有浮动子元素。常见现象是父容器 height 变成 0，背景、边框消失，后续元素上移——这不是 bug，是 CSS 浮动的固有行为。
clearfix 的原理和正确写法
clearfix 是通过在父容器末尾插入一个“清浮动”的伪元素，强制它撑开自身高度。关键在于必须同时满足两个条件：触发 BFC + 清除浮动。
推荐写法（兼容 IE8+）：
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
-
::after必须有content，否则伪元素不渲染 -
display: table触发块级格式化上下文（BFC），避免 margin 合并，比block更稳妥 - 不要只用
clear: both而不设display，否则在部分浏览器中无效 - IE6/7 需额外加
*zoom: 1触发 hasLayout
overflow: hidden 的副作用比你想象的多
给父容器设 overflow: hidden 确实能触发 BFC，从而包含浮动子元素，但这是“顺带效果”，不是设计初衷。
实际使用中容易踩坑：
- 子元素若有
position: absolute且超出父容器范围，会被意外裁剪 - 配合
transform或scroll-behavior时，可能干扰滚动逻辑 - 响应式场景下，当父容器宽度收缩，内容溢出被隐藏，调试困难
- 某些安卓 WebView 对
overflow: hidden的 BFC 触发不一致
现代项目更推荐 flex 或 grid 替代浮动布局
浮动本就不是为页面布局设计的，而是为文字环绕图片。现在用 display: flex 或 display: grid 布局，天然不存在塌陷问题。
例如替代两栏浮动布局：
.container {
display: flex;
}
.left { flex: 0 0 200px; }
.right { flex: 1; }
如果必须兼容老代码，优先用 clearfix；若只是临时调试，overflow: hidden 可快速验证，但上线前务必检查溢出行为。
真正容易被忽略的是：清除浮动不是目的，让父容器正确参与文档流才是。选方案前，先问一句——这个容器真的需要浮动吗？
