clear属性必须用在浮动元素之后的普通流元素上，因其作用是让当前元素避开前方浮动元素造成的侧边空白，若加于浮动元素自身或其前方则无效；常见正确写法为，推荐伪元素::after替代以避免DOM污染。
clear属性为什么必须用在浮动元素后面
因为 clear 的作用不是“让上面的元素不浮动”，而是“让当前元素避开前面浮动元素造成的侧边空白”。如果把它加在浮动元素自己身上，或者加在它前面，浏览器根本没机会计算那个“避开”的位置。
- 常见错误：给浮动的
div自己加clear: both—— 没效果，它自己都浮着，clear 对自己无效 - 正确位置：必须是浮动块之后的下一个普通流元素，比如
<div style="clear: both"></div> - 注意兼容性：
clear在 IE6/7 中对inline元素不生效，务必用块级标签（div、p）
空标签清除法的实际写法和替代方案
所谓“空标签”，就是专门为了清除浮动而存在的无内容标签，最典型的是 <div class="clear"></div>。但它不是唯一解，也不推荐无脑用。
- 经典写法：
<div style="clear: both; height: 0; overflow: hidden;"></div>—— 加height: 0和overflow: hidden是为防止某些老浏览器撑开空白 - 更轻量的替代：
<br clear="both">，HTML4 有效，但语义弱，现代项目中基本被弃用 - 真正推荐的替代：用伪元素（
::after），避免 DOM 污染，但这就不是“空标签”方案了 —— 你选这个方法，就等于放弃了题目限定的场景
clear: both 和 clear: left/right 的区别在哪
别只记 both，实际布局中经常要更精确地控制避让方向。比如两栏浮动，右边栏浮动后，下面的页脚只想避开右边栏，不一定要清左边。
-
clear: left：只避开左侧浮动元素，右侧浮动照常影响它 -
clear: right：只避开右侧浮动元素，左侧浮动照常影响它 -
clear: both：左右都避开 —— 这是大多数“清浮动”需求的默认选择，但不是万能 - 性能影响：三者无差异；但误用
both可能导致意外的垂直间距，尤其在响应式断点切换时容易露馅
为什么现在很少直接用空标签清浮动
不是它错了，而是它暴露了两个现实问题：DOM 结构污染 + 维护成本高。
立即学习“前端免费学习笔记（深入）”；
- 每次加浮动就得同步加一个空
div，模板里满屏<div class="clear"></div>，可读性差 - 如果浮动结构嵌套多层（比如浮动内部还有浮动），单靠一个
clear标签可能清不干净，得层层加 - CSS Grid / Flexbox 普及后，很多原本靠浮动实现的布局已改用更可控的方式，空标签方案自然退居二线
- 但别彻底抛弃它——在需要兼容 IE8 或维护老项目时，它仍是最快、最确定的兜底手段
浮动本身没消失，只是“怎么收尾”这件事，越来越取决于你愿意为兼容性付出多少结构代价。
