浮动导致父容器高度塌陷，overflow: hidden可触发BFC临时解决但有裁剪等副作用；推荐用clearfix伪元素清除或现代display: flow-root，新项目应优先采用Flex/Grid布局。
浮动元素导致父容器高度塌陷
当子元素使用 float: left 或 float: right 后，父容器默认不会包裹它们的高度，表现为背景色/边框“消失”或内容溢出——这不是背景没渲染，而是父容器高度变成 0 了。
为什么 overflow: hidden 能临时解决
给父容器设置 overflow: hidden（或 auto、scroll）会触发 BFC（块级格式化上下文），让容器重新包含浮动子元素的布局范围。但它有副作用：
- 可能意外裁剪掉溢出的内容（比如下拉菜单、阴影、绝对定位元素）
- 在某些移动端 WebKit 内核中引发滚动卡顿或缩放异常
- 语义不清：本意是处理溢出，却被用作清除浮动，后期维护易误解
推荐用 clearfix 类做显式清除
更可控、无副作用的方式是添加一个专门清除浮动的类。现代写法用伪元素，兼容到 IE8+：
.clearfix::after {
content: "";
display: table;
clear: both;
}
使用时只需加在父容器上：<div class="clearfix">...浮动子元素...</div>
立即学习“前端免费学习笔记（深入）”；
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
注意点：
- 不要漏写
content: ""，否则伪元素不生成 -
display: table比block更稳妥，避免 IE6/7 下的 margin 双倍问题 - 如果项目需支持 IE6–7，可补上
*zoom: 1触发 hasLayout
现代替代方案：用 display: flow-root
Chrome 58+/Firefox 53+/Safari 10.1+ 支持 display: flow-root，它是专为创建 BFC 设计的新值，比 overflow: hidden 更语义化且无裁剪风险：
.container {
display: flow-root;
}
但要注意：
- IE 完全不支持，如需兼容必须降级到
clearfix - 它不会影响子元素的
position: absolute定位参考系（这点和overflow: hidden一致） - 不能和
display: inline等内联显示混合使用
浮动本身已是过时布局手段，但老项目维护时，优先选 clearfix；新项目建议直接用 Flex 或 Grid，彻底绕开这个问题。
