display: flow-root 是最直接的解法，它创建新bfc使父容器包裹所有浮动子元素，不继承、不裁剪、不干扰文档流，且比 clear: both 和伪元素更安全简洁。
display: flow-root 是最直接的解法
现代浏览器（Chrome 64+、Firefox 58+、Safari 15.4+）下，给最外层浮动容器加 display: flow-root 就能一次性解决所有嵌套层级的塌陷问题，不用管内部套了几层 float 元素。
它创建一个新的 BFC，让父容器重新“看见”并包裹所有浮动子元素，包括孙子、曾孙级——但注意：这个效果**不继承**，子容器如果自己也含浮动内容，仍需单独处理。
- 比
overflow: hidden安全：不会意外裁剪position: absolute下拉菜单、box-shadow或transform位移后的内容 - 比伪元素
::after简洁：无需写content: ""和display: block组合 - 不破坏文档流：不像
float: left或display: inline-block那样干扰居中、换行或 margin 行为
clear: both 在嵌套中为什么总失效
clear: both 只对「紧挨着它的前一个浮动兄弟元素」起作用，它根本不会穿透父容器去影响祖先高度。常见错误是把 clear: both 加在最内层浮动元素的子元素里，或者加在浮动容器内部但不是最后一个子节点的位置。
- 无效场景：浮动容器
.row内部有.col，你在.col里加clear: both—— 它清的是.col自己前面的浮动，和.row高度无关 - 有效前提：该元素必须是块级、已渲染、与浮动元素同级，并且是浮动容器的**最后一个子元素**
- 如果父容器没形成 BFC，子级的
clear就像清空气：动作做了，但父容器高度还是 0
不得已逐层加 clear 时的关键约束
只有当项目被锁死在 IE11 或旧版 Safari，且无法改用 flow-root 或 flex 时，才考虑手动逐层清除。这时必须满足三个硬性条件：
- 每一层浮动容器，都得有一个**同级、块级、位于末尾**的“收尾”元素，比如
<div style="clear: both"></div> - 不能把
clear写在浮动元素内部（例如浮动div里再塞一个div style="clear:both"），这完全无效 - 若某层容器用了
display: flex或display: grid，clear直接被忽略——此时必须换思路，用align-items或place-content控制对齐
真正容易被忽略的边界问题
清除浮动不是目的，让父容器正确参与文档流才是。很多人加了 clear: both 或 overflow: hidden 后仍出问题，往往是因为：
- 父容器本身存在
margin-collapse（比如相邻块级元素上下 margin 合并），导致视觉上仍像塌陷 - 设了
min-height但值太小，被浮动内容撑开后仍不够显示边框或背景 - HTML 结构混乱：文本内容（如 "test 3"）直接写在浮动容器内部，而非作为子元素统一管理，造成 DOM 层级错位
嵌套越深，靠 clear 打补丁越危险；责任边界一旦划错——比如该由 .container 负责包裹，结果去动 .item——后面全是连锁修复。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
