用 overflow: hidden（触发bfc）或 display: flow-root 解决浮动导致的父容器高度塌陷，避免使用 clear: both 污染html；现代项目优先采用 flexbox 或 grid 布局替代浮动。
浮动元素父容器高度塌陷，内容溢出怎么办
这是最典型的浮动副作用：子元素设了 float: left 或 float: right 后，父容器的 height 变成 0，背景、边框、后续兄弟元素全乱套。
根本原因是浮动元素脱离了文档流，父容器“看不见”它们了。解决不是靠给父容器硬写 height，而是让父容器重新“感知”到浮动子元素的存在。
最直接有效的做法是给父容器加 overflow: hidden（或 overflow: auto）：
.container {
overflow: hidden; /* 触发 BFC，自动包含浮动子元素 */
}
注意：overflow: hidden 本身不“清除浮动”，它是通过触发 BFC（块级格式化上下文）来实现包含效果。BFC 容器会把内部浮动元素纳入布局计算，所以高度就正常了。
常见错误现象：
- 父容器背景色没显示，或只显示一条细线
- 父容器后面的元素往上顶，盖住了浮动内容
- 用
border包裹时，边框只围住空白区域
为什么不用 clear: both 而用 overflow
clear: both 是在浮动元素后面插入一个“清空”的块级元素（比如加个 <div style="clear:both"></div>），它能解决塌陷，但属于“打补丁”式写法，污染 HTML 结构，且对响应式和可维护性不友好。
overflow 方案纯 CSS，不改 HTML，语义干净。但它有隐含限制：
-
overflow: hidden会裁剪掉超出父容器的内容（比如下拉菜单、tooltip、绝对定位偏移过大的元素） -
overflow: auto在不需要滚动时也可能出现空滚动条（尤其 Safari） - 某些旧版 IE（如 IE6/7）对
overflow的 BFC 触发不一致，需配合zoom: 1
现代项目里更推荐什么替代方案
如果项目支持 Flexbox 或 Grid，优先放弃浮动布局本身。浮动本就不是为页面整体布局设计的，而是为文字环绕图片这类场景准备的。
用 Flex 替代浮动做横向排列：
.container {
display: flex;
}
.item {
flex: 0 0 auto; /* 不伸缩，保持自身宽度 */
}
这样既无塌陷问题，也无需 overflow 或 clear。但要注意兼容性底线：Flexbox 在 IE10+ 支持良好，IE9 及以下必须退回到 overflow + BFC 方案。
另外，display: flow-root 是专为此类需求设计的新值，效果等同于 overflow: hidden 但无裁剪副作用：
.container {
display: flow-root; /* 现代浏览器推荐，Chrome 64+/Firefox 59+/Safari 15.4+ */
}
overflow 清浮动时容易被忽略的细节
很多人加了 overflow: hidden 发现还是没用，往往卡在这几个点上：
- 父容器本身有
position: absolute或fixed—— 此时它已脱离文档流，overflow不再触发 BFC - 父容器设置了
height或max-height且值太小，内容被真·隐藏了，误以为“没生效” - CSS 选择器权重不够，被其他规则覆盖，建议用
devtools检查 computed 样式中overflow是否生效 - 父容器是内联元素（如
<span></span>），而overflow对非块级/替换元素无效
BFC 的触发条件不止 overflow 一种，但它是成本最低、兼容性最好、副作用最可控的方案。真正难的不是加哪行 CSS，而是判断什么时候该放弃浮动——尤其是当需求变成“三栏自适应”“等高列”“响应式栅格”时，overflow 就只是临时止痛药了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
