父容器高度为0是因浮动元素脱离文档流，推荐用display: flow-root触发BFC修复；兼容IE时回退overflow: hidden；Flex/Grid布局下无需处理浮动塌陷。
浮动元素导致父容器高度为0怎么办
父容器没高度，是因为内部的 float 元素完全脱离了文档流，父容器“看不见”它们了。这不是bug，是CSS浮动的原始设计行为——它本就用来实现文字环绕图片这类排版，不是为布局而生。
常见错误现象：height: 0、背景色不显示、后续元素上移、margin-top失效；检查computed styles会发现父容器的 height 确实是0。
- 最直接的修复是给父容器加
overflow: hidden（或auto），触发BFC，强制包含浮动子元素 - 如果父容器本身需要溢出内容可见（比如下拉菜单、tooltip），就不能用
overflow: hidden，此时改用display: flow-root——这是现代标准解法，无副作用，兼容性到Chrome 64+/Firefox 58+（IE不支持） - 避免用
clear: both的空标签（如<div style="clear:both"></div>），语义差、冗余DOM、不利于维护
display: flow-root 和 overflow:hidden 哪个更安全
display: flow-root 是专为解决浮动塌陷而引入的值，它创建BFC但不改变溢出行为；overflow: hidden 是“借道”实现，副作用明显：可能意外裁剪阴影、定位元素、滚动条或动画溢出部分。
使用场景决定选择：flow-root 推荐用于纯布局包裹，比如卡片容器、导航栏；overflow: hidden 仅在需同时控制溢出+解决塌陷时才用（例如轮播图外层）。
立即学习“前端免费学习笔记（深入）”；
-
flow-root在Flex/Grid成为主流后依然有用——当子元素必须用float（如遗留代码、某些打印样式）时，它是唯一干净解法 - IE11及以下不支持
flow-root，若需兼容，可用@supports回退：parent { display: flow-root; }@supports not (display: flow-root) { parent { overflow: hidden; } } - 注意
overflow: auto在Safari中可能触发不必要的滚动条，hidden更稳妥
为什么clearfix方案现在不太推荐了
经典clearfix（通过伪元素 ::after 清除浮动）本质是模拟一个清除元素，但它依赖生成内容、触发重排、且在某些缩放或高DPI下偶发失效。
它曾经流行，是因为 flow-root 还没出现，而 overflow 又有副作用。现在它只剩一个价值：兼容IE8–IE11。
- 如果你项目已放弃IE，就别再写
.clearfix类，直接用display: flow-root - 如果必须支持IE，优先用
overflow: hidden替代clearfix——少一行CSS，少一个渲染节点 - 所有clearfix变体（micro clearfix、group等）都面临同样问题：伪元素可能干扰可访问性（如被读屏器误读），且无法响应式控制（比如只在小屏清除）
Flex/Grid布局下还用担心浮动塌陷吗
不用。一旦父容器设为 display: flex 或 display: grid，子元素即使有 float，也不会导致父容器塌陷——因为Flex/Grid容器自身就是BFC，且浮动在该上下文中基本失效（仅影响文本环绕，不影响布局流）。
但要注意：这不等于可以随意混用。浮动和Flex共存会带来不可预测的对齐行为，尤其在响应式断点切换时。
- 如果用了Flex/Grid，就把
float全部删掉，用align-self、justify-content等原生能力替代 - 不要为了“兼容老代码”而在Flex容器里保留
float: left——它不会按你预期排列，反而增加调试成本 - 检查构建工具（如PostCSS）是否自动插入了
float相关polyfill，某些旧插件会在Flex规则后补浮动声明
clear，最后卡在响应式断点上动弹不得。 
