嵌套越深浮动越容易“消失”是因为浮动只影响直接父容器，不向上冒泡；每层父容器都需单独触发BFC或清除浮动，否则塌陷导致布局错乱。
为什么嵌套越深，浮动越容易“消失”
不是浮动本身变弱了，而是浏览器对浮动的感知是“单层穿透”的：浮动子元素只影响它的**直接父容器**，不会向上“冒泡”通知爷爷、太爷爷级容器。一旦某一层父容器没做任何处理（比如没触发 BFC、也没清除浮动），它就会塌陷成 height: 0，后续所有依赖它定位、包裹或背景渲染的样式就全乱了。
- 你看到侧边栏背景没了？可能是
.sidebar没清浮动，但你只在最外层.page加了clearfix - 导航菜单项错位到页脚上？很可能是
.nav的父容器（比如.header）高度为 0，而.nav自己又浮动了，彻底脱离上下文 - 用
outline: 1px solid red一查，发现某层容器“看不见”——那就是它塌陷了，不是代码漏写了，是那层没被干预
每一层都得“单独收口”，不能靠“顶层一清了之”
浮动影响不累积、不继承，只作用于当前 formatting context。所以嵌套 3 层浮动容器（比如 .card → .card-body → .tag-list），就得在 .card、.card-body、.tag-list 三层分别处理，而不是只给 .card 加个 ::after 就万事大吉。
-
.tag-list浮动了子项 → 它自己必须包裹住这些子项（加display: flow-root或::after） -
.card-body包含.tag-list→ 它也要能正确计算高度，否则.card看不到内容，背景/阴影全失效 - 老项目里常见“伪清除”写法：
.clearfix::after放在全局，结果只生效于最后一层，中间层照样塌陷
position 和 overflow 在嵌套中会悄悄“放大”问题
很多组件库默认给卡片、弹窗、Tab 面板加 position: relative，本意是为绝对定位子项服务，但它会让浮动子项的定位参考系突然切换——尤其当该层又没设 height 或触发 BFC 时，浮动元素可能“飘”出可视区，或者被意外裁剪。
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
-
overflow: hidden在某中间层使用？小心它把下拉菜单、Tooltip、气泡框全截掉 -
position: relative+float组合，若没配min-height或 BFC，父容器高度仍为 0，只是你没立刻察觉 - Chrome 和 Safari 对深层浮动的重排行为略有差异，同一套嵌套结构，在缩放 110% 或高 DPI 屏幕下更容易暴露塌陷
现代替代方案不是“更好看”，而是“不依赖收口”
Flex 和 Grid 天然不脱离文档流，父容器自动撑开，根本不存在“哪一层忘了清”的问题。这不是升级炫技，是去掉一个必须手动维护的脆弱链路。
立即学习“前端免费学习笔记（深入）”；
- 把
.sidebar和.main的共同父容器设为display: flex，子项去掉float，用flex: 1分配宽度 —— 嵌套再深也不用管“清不清” - 多列卡片布局改用
display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，等高、换行、响应式全自带 - 兼容性够用：
display: flex和grid在 IE11+、所有现代浏览器稳定运行；真要保 IE9–10，display: table-cell比float更可控
.card {
display: flow-root; /* 推荐：语义清晰，无裁剪风险 */
}
.card-body {
display: flow-root;
}
.tag-list {
display: flow-root;
}嵌套浮动真正难的不是写清除代码，而是记住“每层都是独立战场”，稍有遗漏，错位就从 DOM 深处悄然发生。
