嵌套浮动导致父容器“层层失明”是因浮动元素脱离文档流，仅影响直接父容器高度计算；需每层父容器（如.container、.row、.col）独立设置display:flow-root触发bfc以彻底解决。
嵌套浮动会让父容器“层层失明”
因为浮动元素脱离文档流是单向、局部的——它只影响自己的直接父容器，不会向上“穿透”通知爷爷辈容器。当你在 .col 里用 float: left，.col 的高度就塌了；如果 .col 自己又是 .row 的子元素，而 .row 没做任何处理，那 .row 的高度也会塌；再往上，.container 同样看不见所有浮动内容。这不是 bug，是 CSS 规范明确规定的逐层计算逻辑。
clear: both 对嵌套内部完全无效
clear: both 只作用于当前元素自身所在的“行框”，让它避开前面**同级**的浮动兄弟元素。它不改变父容器是否包含浮动子项，也不触发 BFC。常见错误写法：
.col::after { content: ""; clear: both; }
这段代码没加 display: table 或 display: block，伪元素默认是 inline，clear 不生效；即使修好了，它也只解决了 .col 这一层的闭合，对 .row 和 .container 毫无帮助。
display: flow-root 是嵌套场景最稳的选择
它为每个浮动容器单独创建一个 BFC，天然包裹内部所有浮动子项，且不影响定位流、不裁剪内容、无需额外标签。嵌套多深，就加多深：
-
.container、.row、.col都需要各自设置display: flow-root - 不要只给最外层加——内层不加，塌陷照样发生
- IE 不支持
flow-root？那就退到overflow: hidden，但得确认内容不会溢出被裁剪
用开发者工具快速定位哪一层漏了
遇到错乱别猜，直接打开 DevTools：
- 逐层选中疑似父容器（比如
.sidebar→.nav→.menu） - 看右侧面板的 Computed 标签页里
height值是不是0px或远小于预期 - 临时加
outline: 1px solid red，观察实际占位范围是否“包不住”里面的浮动子元素
嵌套越深，越容易漏掉某一层——不是方案不行，是少加了一次 display: flow-root。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
