clear 不是全局样式，强行在全局应用会破坏文档流；清除浮动必须作用于浮动元素的直接父容器，而非任意祖先；display: flow-root 虽比 overflow: hidden 安全，但也会创建新 bfc 并影响布局。
clear 不是全局样式，强行在全局范围应用它会直接干扰正常文档流——这是问题根源。
clear: both 写在 * 或 body 上等于给所有元素“强制换行”
很多人误以为加个 clear: both 是“保险起见”，结果把规则写成：
* { clear: both; }
这会让每个元素（包括 span、a、em）都变成块级并拒绝浮动靠近自己。后果很直接：
- 内联元素被强制换行，文字断开、排版错乱
- 原本靠
float: left并排的导航项全堆成一列 - 表单控件（如
input+label）垂直堆叠，失去水平对齐 - 第三方 UI 组件（比如日期选择器弹层）因父容器被清浮动而定位失效
浮动清除必须作用于“浮动容器的父级”，不是任意祖先
清除浮动的本质，是让某个容器重新包含其内部浮动子元素的高度。这个“某个容器”必须是浮动元素的**直接父容器**，而不是往上随便找一层。
- 错误做法：给
body或.wrapper加clear: both—— 它不包含任何浮动子元素，纯属无效且污染全局 - 正确做法：浮动子元素在
.nav-list里，就只给.nav-list加display: flow-root或.nav-list.clearfix - 嵌套浮动时（如卡片内有浮动头像+文字），每一层浮动容器都要单独处理，
clear不会穿透层级生效
display: flow-root 比 overflow: hidden 更安全，但也不能乱加
display: flow-root 确实比 overflow: hidden 好，但它依然会创建新的 BFC —— 这意味着它会隔离 margin 合并、影响绝对定位参考系。
- 如果给一个本该和兄弟元素合并上下 margin 的
section加了flow-root，视觉间距就会变大 - 如果给一个
position: relative的弹层容器加了flow-root，里面position: absolute的子元素可能参考错位 - 某些 CSS 动画库或网格系统依赖默认文档流行为，乱加
flow-root可能导致动画卡顿或布局偏移
真正容易被忽略的是：clear 和 flow-root 都不是“修复工具”，而是“容器行为声明”。它们只应在明确需要包裹浮动子元素的那一个父容器上出现，多加一层，就多一分不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
