父容器高度为0通常是浮动塌陷所致，需逐层检查computed height并为每层触发BFC（如display: flow-root）；clear: both仅对浮动后的块级兄弟元素有效；现代布局应优先使用flex或grid替代Float。
父容器高度为 0？先确认是不是浮动导致的塌陷
这是最典型的信号：父元素加了 background-color 或 border，但完全看不见——用开发者工具看 computed height 是 0px，或者临时加 outline: 1px solid red 发现框根本没包住子元素。
此时基本可断定：里面有元素设置了 float: left 或 float: right，且父容器没做清除或 BFC 触发。
嵌套浮动时，只清外层不够，必须逐层检查
常见误区是给最外层容器加了 .clearfix，但内部还有个 .sidebar 也含浮动子项，结果 .sidebar 自身高度仍塌陷，导致整体错位。浮动影响只作用于“直接父容器”，不会穿透。
- 用开发者工具逐层选中每个疑似浮动容器（比如
.nav、.card-list、.media） - 查看其
computed height是否合理；若为0或明显偏小，说明这一层没清好 - 对每一层都单独触发 BFC：
display: flow-root（推荐）或overflow: hidden（注意裁剪风险） - 不要依赖全局
::after清除——伪元素清除必须写在该容器自己的 css 规则里
clear: both 不起作用？检查它是否真的应用在“浮动之后”的元素上
clear 不是“清浮动”，而是“让当前元素避开前面的浮动”。如果把它加在浮动元素**之前**，或加在一个 display: inline 元素上，就完全无效。
-
clear: both必须作用于浮动元素**之后的兄弟元素**，且该元素需是块级（display: block） - 常见翻车点：浮动元素后跟的是
，但被重置了display: inline；可临时加display: block验证 - 更稳妥的做法是避免依赖
clear，直接让父容器自己“收口”（BFC） - 若必须用
clear，优先写在结构末尾的占位元素上，而不是靠 js 动态插入
现代项目别硬扛 float，该换就换
浮动本就不是为布局设计的，只是早期 hack 手段。现在 flex 和 grid 能天然解决文字环绕、多列对齐、基线控制等需求，且无塌陷问题。
立即学习“前端免费学习笔记（深入）”；
- 文字环绕图片 → 仍可用
float: left+margin，这是少数 float 不可替代的场景 - 导航栏、侧边栏、卡片列表 → 改用
display: flex，一行代码替代整个 clearfix - 响应式网格 →
display: grid配合fr单位，比 float + 媒体查询清晰得多 - 老项目维护中，优先补
display: flow-root，而不是塞zoom: 1或空div
浮动问题本身不难，难在它容易“传染”——一层没清，错乱就往下传。调试时别猜，直接看 computed height，一层一层点进去，哪层塌了就清哪层。别指望一个 .clearfix 搞定全部，也别在新代码里还用 float 做主布局。