父容器高度塌陷需触发BFC：推荐display: flow-root（无副作用），次选overflow: hidden（可能裁剪内容）；clearfix伪元素法须满足content、display、clear三要素；flex布局下float失效，无需处理但应避免混用。
float元素撑不开父容器怎么办
父容器高度塌陷，是因为浮动元素脱离了文档流，父容器默认不计算它们的高度。这不是bug，是CSS float的原始设计逻辑——它本就为文字环绕图片这类场景服务。
最直接有效的解法是触发父容器的BFC（块级格式化上下文），让容器“重新认识”浮动子元素：
-
overflow: hidden或overflow: auto：简单粗暴，但可能意外裁剪溢出内容或触发滚动条 -
display: flow-root：现代标准方案，专为此类问题设计，无副作用，Chrome 58+/Firefox 57+ 支持 -
float: left或float: right自身浮动：会让父容器也脱离文档流，通常不推荐
clear:both伪元素清除法怎么写才不出错
这是兼容性最好、老项目最常用的手法，核心是用::after在父容器末尾插入一个清除浮动的元素。容易漏掉的关键点不是语法，而是样式缺失：
- 必须设
content: ""，否则伪元素不生成 - 必须设
display: table或display: block，inline无效 - 必须加
clear: both，只靠display没用 - 别忘了给伪元素设
height: 0或visibility: hidden，避免额外占位
标准写法：
.clearfix::after { content: ""; display: table; clear: both; }
立即学习“前端免费学习笔记（深入）”；
flex布局下还用不用处理float溢出
不用。一旦父容器设了 display: flex，子元素无论是否float，都不会导致父容器塌陷——因为flex容器天然形成BFC，且浮动属性对flex item完全失效（float 被忽略）。
但要注意：这不是“修复”，而是“绕过”。如果代码里还留着float，说明布局逻辑混乱。真实项目中，要么全用flex/grid，要么统一用传统流式+清除，混用会增加维护成本和意外交互。
为什么display:flow-root比overflow:hidden更安全
overflow: hidden 的副作用太隐蔽：当子元素有绝对定位、transform偏移、或JS动态拉出菜单时，可能被意外裁剪；而display: flow-root只改变格式化上下文，不影响溢出行为。
它本质是创建一个独立的渲染区域，让浮动子元素能被正确测量高度，同时保留父容器原本的overflow表现（比如仍可设overflow: visible）。
兼容性方面，IE完全不支持，但如果你还在支持IE，那清除浮动大概率得回退到clearfix方案——这点常被忽略，一写flow-root就忘了查Can I Use。
