父容器高度塌陷因浮动元素脱离文档流，可用overflow:hidden、::after清除或display:flow-root修复；clear仅对同流块级元素有效；Flex/Grid中float被忽略，但内部浮动仍影响子项内容。
float导致父容器高度塌陷，怎么快速修复
父元素没设高度时，只要子元素用了 float，它就会“看不见”浮动子元素，导致自身高度坍缩为 0——这是最常被卡住的第一步。
根本原因不是 float 本身错，而是浮动元素脱离了普通文档流，父容器计算高度时直接忽略它们。
- 临时救急：给父容器加
overflow: hidden或overflow: auto（注意：可能意外裁剪子元素或触发滚动条） - 语义更清的方案：用
::after伪元素 +clear（即“BFC 清除法”，兼容到 IE8） - 现代项目优先用
display: flow-root（Chrome 58+、Firefox 57+、Safari 10.1+），它创建 BFC 且不带overflow的副作用
clear属性为什么有时不起作用
clear 只对紧邻的、在**同一文档流中**的块级元素生效。如果目标元素本身也浮动了，或者被 position: absolute 拉出了流，clear 就完全失效。
- 常见误用：给浮动子元素自己加
clear: both——这毫无意义，它只影响后续兄弟元素的位置 - 正确位置：加在需要“避开所有浮动”的那个兄弟元素上，比如导航栏下面的正文区域
- IE6/7 中
clear在某些 display 类型下会失效，此时必须确保该元素是块级（如display: block）
display: flow-root 和 overflow: hidden 的实际差异
两者都能让父容器包含浮动子元素，但行为边界完全不同。
立即学习“前端免费学习笔记（深入）”；
-
overflow: hidden会隐藏溢出内容，且在 Safari 旧版本中可能引发合成层问题，影响滚动性能 -
display: flow-root仅创建新的块格式化上下文（BFC），不改变溢出行为，也不强制硬件加速 - 当父容器内有
position: absolute子元素且需相对于它定位时，flow-root更安全——overflow: hidden会让这些绝对定位元素被裁剪
Flex/Grid 布局下还要管 float 吗
不用刻意清除，但得知道 float 在新布局中的真实表现：它会被降级为“不影响主轴排列”的装饰性定位，且可能破坏对齐逻辑。
- 在
display: flex容器里，float属性会被忽略（规范明确要求） - 在
display: grid容器里同理，float失效，clear也无效 - 唯一要注意的是：如果把 float 用在 grid/flex 的子项内部（比如子项里有个浮动图标），那它只影响那个子项自己的内容流，和外部布局无关
真正容易被忽略的是混合场景：比如用 float 做文字环绕，同时又在外层套了 flex 容器——这时 float 依然生效，但父 flex 容器不会因它改变尺寸，得靠子项自身处理内容撑开。
