如何通过在浮动元素后添加空标签并设置clear属性来清除CSS浮动？

本文共计920个文字，预计阅读时间需要4分钟。

因为 `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 或维护老项目时，它仍是最快、最确定的兜底手段

浮动本身没消失，只是“怎么收尾”这件事，越来越取决于你愿意为兼容性付出多少结构代价。