子容器不占父容器高度是因浮动导致父容器高度塌陷，需在最后一级浮动子元素的父级上清除浮动；display: flow-root可替代clearfix建立bfc，flex/grid布局更推荐彻底规避问题。
浮动嵌套时子容器不占父容器高度怎么办
父容器高度塌陷，是因为所有子元素都脱离了文档流——这和单层浮动一样，但嵌套后更难察觉。关键是：清除浮动的位置必须在「最后一级浮动子元素的父级」上，而不是最外层容器。
-
clear: both加在错误层级（比如加在外层容器）完全无效 - 如果子容器内部还有浮动元素，仅对子容器自身
clear不够，得在它的子元素末尾加清除项 - 现代写法优先用
display: flow-root替代clearfix，它天然建立 BFC，不依赖伪元素或额外 DOM 节点
clearfix 伪类在嵌套浮动中为什么有时失效
失效不是因为写法错，而是因为 ::after 清除的是「当前元素内部最后一个浮动兄弟」，而嵌套结构里，你可能误以为它能穿透到孙子级。
- 常见错误：给外层容器加
clearfix，但浮动实际发生在孙级.item上，中间的子容器没浮动也没清除，等于没拦住 -
clearfix的content: ""+clear: both只作用于同级浮动元素，无法影响嵌套更深的浮动流 - 若必须用
clearfix，每个产生浮动的容器（哪怕只是中间一层）都要单独加，不能只靠最外层“一劳永逸”
display: flow-root 能否替代所有嵌套清除场景
能，但要注意兼容性与触发时机——它不是“清除”，而是让容器自己变成 BFC 容器，把内部浮动框“关”在里面。
- 支持 IE11+ 和所有现代浏览器，
IE10及更早版本不支持 - 对父容器设
display: flow-root后，它会包含所有后代浮动元素的高度，包括嵌套多层的 - 注意副作用：
flow-root会重置某些继承行为（如font-size缩放），若容器内有em单位文本，需检查是否意外缩放
flex 或 grid 布局能否彻底绕过嵌套浮动问题
可以，而且是推荐做法——浮动本就不是为复杂嵌套设计的，强行清除是补救，改用弹性或网格才是归途。
立即学习“前端免费学习笔记（深入）”；
- 把最外层设为
display: flex，子容器自动成为 flex item，不再需要float；内部再嵌套 flex 或 grid，浮动根本不会出现 - 如果遗留代码里浮动已深度耦合（比如依赖
float: left实现图文混排），直接替换需同步调整margin、width行为，否则布局会偏移 - 注意：flex 容器默认
flex-wrap: nowrap，多列浮动转 flex 时，记得加flex-wrap: wrap避免溢出
嵌套浮动真正棘手的地方不在技术方案，而在判断“哪一层该负责清除”。很多人盯着最外层调样式，其实问题藏在第二层容器没设 BFC 或没承接浮动流。修的时候，先用浏览器开发者工具选中每一级容器，看 computed height 是不是 0——从第一个 height 为 0 的父级开始处理，通常就对了。
