应使用伪元素清除浮动：.clearfix::after { content: ""; display: table; clear: both; }，避免 overflow: hidden 和空标签；Flex 布局下无需清除，因 float 失效；IE8 兼容用 *zoom: 1 加双伪元素。
浮动元素导致父容器高度塌陷怎么办
父容器 height 变成 0 或远小于子元素实际高度，本质是浮动元素脱离文档流，父容器无法感知其高度。这不是“布局错乱”，而是标准行为——必须显式干预。
- 不要依赖
overflow: hidden撑高（虽常见但副作用大：会裁剪position: absolute溢出、影响滚动逻辑） - 避免用空
<div style="clear: both"></div>（语义差、增加无意义 DOM 节点） - 推荐用伪元素清除：在父容器上添加
::after并设置clear: both
.clearfix::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 display: block 更稳妥，能兼容 IE8+，且不会意外触发 margin 合并。
Flex 布局下还用得着清除浮动吗
不用。一旦父容器设了 display: flex，子元素即使有 float 也会被强制纳入 Flex 格局，float 失效，自然不存在塌陷问题。但这是“掩盖”而非“解决”——说明你本不该在 Flex 容器里用 float。
- 检查是否误用了
float：现代布局中，float仅适用于文字环绕图片等少数场景 - 若需多列等高，直接用
align-items: stretch（默认值）即可 - 若旧代码混用
float和flex，先删掉float，再调flex-basis或min-width
清除浮动后内容被挤到下一行怎么调
典型现象是：加了 clearfix 后，紧随其后的兄弟块级元素突然换行。这是因为 ::after 生成的伪元素默认是 display: table，它会产生一个“块级格式化上下文（BFC）”，可能影响外边距行为。
立即学习“前端免费学习笔记（深入）”；
- 确认是否在父容器上错误地同时写了
float和clearfix（二者冲突） - 检查后续元素是否有
clear: both或clear: left/right，这会强制换行 - 更轻量的替代方案：
display: flow-root（Chrome 64+/Firefox 59+/Safari 15.4+ 支持），它创建 BFC 且不产生伪元素
.container {
display: flow-root;
}
IE8 兼容场景下清除浮动的底线方案
如果必须支持 IE8，display: flow-root 不可用，::after 伪元素也存在渲染不稳定问题。这时只能回归最保守但可靠的方案：
- 给父容器设
zoom: 1（触发 IE 的 hasLayout） - 配合
*:before, *:after双伪元素（IE8 仅识别*:before，但双写可提升稳定性） - 避免用
content: ""以外的值（IE8 不支持content: " "中的空格）
.clearfix {
*zoom: 1;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
真正难处理的不是清除本身，而是团队里有人还在用 float 写整页栅格——这种惯性比技术方案更难清除。
