最有效解法是为每一级直接包裹浮动子元素的父容器显式添加.clearfix类或display: flow-root；因浮动脱离文档流的影响不向上穿透，仅作用于直接父级，嵌套结构中每层都需独立清除，缺一不可。
浮动影响只作用于直接父容器，嵌套越深越容易漏清
浮动元素脱离文档流，但它的“脱离”不会向上穿透——.item浮动，只让.list塌陷；.list再浮动，只让.card塌陷；.card若没处理，.page照样高度为0px。浏览器不自动帮你“逐层收口”，你得手动在.list、.card、.page每一层都加清除逻辑。
常见错误现象：
- 侧边栏背景突然消失 →
.sidebar的直接父容器没加clearfix或display: flow-root - 导航菜单掉到页脚下面 →
.nav的父容器.header高度为0，而.header自己又浮动了 - 用
outline: 1px solid red一查，发现某层容器“看不见” → 那就是它塌陷了，不是代码漏写，是那层根本没被干预
clearfix必须显式加在每一层，不存在继承或自动传播
一个.clearfix类只对当前元素生效，它不管孙子、曾孙有没有浮动。你给.page加了clearfix，但.card里嵌了个.tag-list也浮动，.card仍会塌陷——因为.card自己没加清除。
实操建议：
- 只要某元素的**直系子元素**用了
float: left或float: right，它自己就必须带clearfix或display: flow-root - 避免全局统一加
.clearfix：老项目里常见.wrapper加了，但.modal-body没加，结果弹窗内容溢出 - Vue/React组件中尤其注意“看不见的父容器”：模板编译后多出一层
<div>，它成了浮动子项的新父级，却没人给它加清除 <h3>overflow: hidden这类“伪清除”副作用太隐蔽</h3> <p><code>overflow: hidden能触发BFC撑开高度，但它不是清除，是裁剪——下拉菜单、Tooltip、阴影、transform位移后的元素，全可能被意外截掉。而且它和position: relative混用时，浮动定位参考系会悄悄切换，导致元素“飘”出可视区。对比选择：
-
display: flow-root：现代首选，无副作用，Chrome 64+/Firefox 58+已全覆盖，一行解决 -
.clearfix::after：兼容IE8+，推荐写法是content:""; display: table; clear: both;，display: table比block更稳，防IE6/7 margin折叠 -
overflow: hidden：仅当确认无溢出内容时临时用，别当默认方案
Flex/Grid替代浮动后，维护负担不是降低而是转移
换成
display: flex确实不用清浮动，但新问题立刻浮现：-
float在flex item上完全失效，老代码里依赖浮动实现文字环绕的图片排版会崩 - 混用场景最难查：页面主体用Grid，但某个第三方组件内部仍用浮动，那个组件的父容器就又得单独处理塌陷
-
flex-direction: column下，order值错一位，视觉顺序就全乱，比浮动错位更难肉眼定位
真正难维护的从来不是“怎么写浮动”，而是“改一处，其他地方悄无声息地偏了”——这种脆弱性在嵌套越深时越致命，而它无法靠单点修补根除。
-
