浮动导致父容器塌陷时，首选 clearfix 清除浮动（兼容性好、无裁剪副作用），次选 overflow: hidden（触发 BFC 但会裁剪溢出内容）；现代布局应直接用 flex 或 grid 替代浮动。
浮动元素撑不开父容器，内容溢出怎么办
父容器高度塌陷、子元素跑出可视区域，本质是浮动脱离文档流导致的。直接给父容器加 overflow: hidden 最快，但会意外裁剪溢出内容（比如下拉菜单、阴影、定位偏移）；用 clearfix 更稳妥，兼容性好，不干扰视觉表现。
overflow hidden 为什么能“修复”浮动塌陷
它触发了 BFC（块级格式化上下文），BFC 容器会包含内部浮动元素的高度计算。但副作用明显：
- 所有超出父容器边界的内容（
position: absolute偏移、box-shadow、transform位移）会被强制裁剪 - 在移动端可能影响 touch 滚动行为（尤其配合
touch-action时） - IE6/7 不支持
overflow: hidden触发 BFC 的某些边界情况
.container {
overflow: hidden; /* 触发 BFC，父容器重新计算高度 */
}推荐用 clearfix 清除浮动（现代写法）
本质是在父容器末尾插入一个清除浮动的伪元素，不依赖 BFC，也不影响溢出渲染。主流框架（Bootstrap、Ant Design）都内置类似逻辑：
.clearfix::after {
content: "";
display: table;
clear: both;
}
/ 使用时只需加 class /
左栏
右栏
-
::after必须设display: table或block，clear: both才生效 - 不要用
display: inline-block，它无法触发清除行为 - 如果父容器本身是
display: flex或grid，根本不需要清除浮动——浮动在这些上下文中自动失效
更现代的替代方案：flex / grid 布局直接绕过浮动
浮动本就不是为布局设计的，CSS3 布局方案已完全可替代。遇到浮动溢出，优先考虑重构而非“修复”：
立即学习“前端免费学习笔记（深入）”；
- 两栏布局？用
display: flex+flex: 1更可控 - 响应式栅格？
display: grid配合fr单位更简洁 - 旧项目维护？先确认是否真需要浮动——很多“清除浮动”只是历史惯性，实际删掉
float加display: inline-block或flex反而更稳
.container {
display: flex;
}
.left { flex: 0 0 200px; }
.right { flex: 1; }浮动溢出问题背后，往往暴露的是布局思路滞后。真正难的不是选 clearfix 还是 overflow，而是判断此刻该不该继续用浮动。
