clear属性控制元素上边界避开浮动元素，仅对块级元素生效；clear: both最常用但会强制换行，display: flow-root是现代更优的父容器包裹浮动方案。
clear 属性的作用就是“让元素不跟在浮动元素后面排布”
它不是清除浮动本身，也不是让父容器包住子浮动，而是控制当前元素的**上边界**不能和前面的 float: left 或 float: right 元素重叠。常见表现是：一个本该紧贴上一个 div 的段落，却莫名其妙地卡在了左侧浮动图片的右边——这时加 clear: both 就能让它老老实实换行下来。
clear 常用值的实际效果差异
clear: left 表示该元素的上边框不能和任何 float: left 元素在同一行；clear: right 同理；clear: both 是最常用的情况，表示避开所有方向的浮动；clear: none（默认值）就是不避开，可能被浮动元素顶开。
- 如果页面只有一个左浮动的广告栏，正文用
clear: left就够了，不必写both -
clear: both会强制换行，哪怕左右都没浮动元素，也会多出一段空白间距 -
clear只对**块级元素**生效，span或em这类内联元素设了也没用
为什么 clear 之后元素还是没“掉下来”？
典型原因是：目标元素本身没有触发块格式化上下文（BFC），或者被其他 CSS 干扰了布局流。比如它被设了 display: inline-block、float 自身、或父容器用了 overflow: hidden 却没给高度——这些都会让 clear 看似失效。
更常见的误判是：以为 clear 能“修复”浮动塌陷。其实它只影响自身位置，不改变父容器高度。要撑开父容器，得用 overflow: auto、display: flow-root 或伪元素 ::after { content: ""; display: table; clear: both; }。
立即学习“前端免费学习笔记（深入）”；
现代替代方案：display: flow-root 更干净
如果你只是想让一个容器自动包含内部浮动子元素，并且不需要兼容 IE，display: flow-root 是比 clear 更直接的选择——它创建一个新的 BFC，天然隔离浮动影响，无需额外元素或 hack。
article {
display: flow-root;
}
article img {
float: left;
margin-right: 1rem;
}
这段代码下，article 高度会包含 img，里面后续的 p 也不会被图片挤偏。而如果还用 clear，就得在每个 p 上单独加，维护成本高得多。
真正容易被忽略的是：clear 的生效依赖于文档流中**前一个浮动兄弟元素的存在顺序**。如果浮动元素是动态插入的、或被 display: none 临时隐藏，clear 就可能找不到目标，行为变得不可预测。
