用 overflow: hidden 或 display: flow-root 触发 BFC 可解决浮动塌陷；clear: both 需作用于浮动后新元素或伪元素；Flex 布局天然不脱离文档流，但需避免混用 float 和检查 JS 兼容性。
浮动元素撑不开父容器怎么办
父元素背景色突然消失、高度变成0，基本就是浮动元素没被包含进去。这不是CSS bug，是浮动本身的特性——脱离文档流后，父容器就“看不见”它了。
- 只对设置了
float: left或float: right的元素生效，float: none不触发 - 父容器没有设置固定高度、且内部只有浮动子元素时，塌陷最明显
- 用
overflow: hidden是最快捷的修复方式，但要注意它会裁剪溢出内容（比如下拉菜单、tooltip） - 如果父容器本身需要滚动，改用
overflow: auto更安全
clear:both 为什么有时不顶用
clear: both 本身没错，但它必须作用在浮动元素之后的「新元素」上，而不是父容器自己。很多人把 clear 加在父容器上，结果毫无反应。
- 正确写法是在最后一个浮动子元素后面加一个空
- 更现代的做法是用伪元素：给父容器加
::after并设置content: ""+clear: both - 注意伪元素必须有
display: table或display: block，否则clear不生效 - IE6/7 不支持
::after，如果还要兼容，得回退到空标签方案
flex 替代 float 后背景色还丢吗
不丢。Flex 布局天然不脱离文档流，父容器能正常计算高度。但别以为只要写了 display: flex 就万事大吉。
- 子元素如果同时写了
float，flex 会忽略 float 行为，但部分老浏览器可能表现异常 - 确保父容器没有意外继承
height: 0或min-height: 0 - 如果子元素用了
align-self: stretch但父容器没设高度，背景色可能“看起来”没铺满——其实是子元素没撑开，不是塌陷 - Flex 替换 float 是长期推荐方案，但迁移时要检查所有依赖 float 的 JS 定位逻辑（比如某些轮播图插件）
为什么 BFC 能解决但别乱用
触发 BFC（块级格式化上下文）确实能让父容器包含浮动，比如 overflow: hidden、display: flow-root 都是常见手段。但它的影响比表面看起来更广。
-
display: flow-root是最干净的方案，专为解决此问题设计，无副作用，但 IE 完全不支持 -
overflow: hidden简单有效，但一旦子元素有绝对定位或 transform 动画，可能被意外裁剪 -
position: absolute也能触发 BFC，但会让父容器脱离文档流——这反而引发新塌陷 - 多个嵌套浮动容器都用 BFC，可能造成层叠上下文混乱，影响
z-index行为
真正容易被忽略的是：浮动塌陷往往不是孤立问题，而是和清除时机、JS 动态插入内容、或者 CSS-in-JS 的样式注入顺序耦合在一起。修完 CSS，记得在 DOM 更新后手动触发一次 offsetHeight 读取，强制浏览器重排。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
