clear: both 并非清除浮动，而是强制元素上边框避开左右浮动元素，在顶部留出足够垂直空间直至浮动结束；它必须作用于需下移的非浮动块级元素，且父容器需触发bfc或使用现代方案如display: flow-root。
clear: both 为什么能“压住”浮动元素
浮动元素会脱离文档流，导致后续普通块级元素往上爬，看起来像被“吸上去”了。clear: both 的作用不是“清除浮动”，而是告诉浏览器：“我这个元素的上边框，不能和任何向左或向右浮动的元素挨着”——它强制在自身顶部留出足够垂直空间，直到前面所有浮动都结束。
常见错误现象：clear: both 加了但没效果，大概率是因为目标元素本身也浮动了，或者父容器塌陷导致它根本没出现在预期位置。
- 必须作用在「想下移的那个元素」上，不是浮动元素自己
- 如果该元素同时设置了
float: left，clear会被忽略（浮动元素不参与文档流布局） - 父容器没有触发 BFC（比如没设
overflow: hidden）时，子元素即使加了clear，也可能因父容器高度塌陷而视觉错位
替代 clear: both 的现代写法（Flex/Grid 场景）
用 clear: both 本质是在对抗浮动布局的副作用。现在多数场景其实不该用 float 做布局——Flex 和 Grid 天然不产生浮动溢出问题。
使用场景：老项目维护、邮件模板（CSS 支持弱）、或必须兼容 IE8+ 的表单行排列。
- Flex 容器中，用
flex-wrap: wrap+width控制换行，无需clear - Grid 中，用
grid-template-columns或fr单位划分区域，浮动根本无用武之地 - 若只是想让某个元素独占一行，
display: block已足够；clear: both是为“避开已有浮动”而生，不是“换行指令”
clear: both 在 clearfix 中的真实角色
很多人把 clear: both 和 clearfix 混为一谈，其实它只是 clearfix 技巧里的一个环节。真正的 clearfix 是解决「父容器高度塌陷」，而 clear: both 是其中伪元素用来撑开底部的手段。
典型错误：只给父容器加 clear: both —— 这完全无效，因为父容器自己没浮动，clear 对它不起作用。
- 标准 clearfix 写法中，
::after伪元素设clear: both，是为了让这个看不见的子节点“卡住”所有浮动子项的底部 - IE6/7 需要
zoom: 1触发 hasLayout，否则伪元素不生效 - 现代项目推荐用
display: flow-root替代 clearfix，更简洁且无副作用
clear 属性值差异与兼容性陷阱
clear 不只有 both，不同取值对应不同避让策略，选错会导致布局意外偏移。
-
clear: left：只避开左边浮动，右边浮动仍可能顶上来（常被误用于“清左浮”，结果右侧内容错位） -
clear: right：同理，仅防右浮，左侧不管 -
clear: none（默认值）：不避让任何浮动，最容易被忽略的隐式状态 - IE6–7 不支持
clear: inline-start等逻辑属性，坚持用物理方向值
性能影响几乎为零，但滥用 clear（比如每个段落都加）会让 CSS 更难维护，也掩盖了本该用现代布局解决的结构问题。
真正容易被忽略的是：clear 只对「块级盒」生效，inline 或 inline-block 元素加了也没用；另外，它只检查「前面兄弟元素」的浮动状态，不会往前跨过父容器去找祖父级的浮动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
