clear: both 空元素能强制换行，因其作为块级元素位于浮动元素之后时，会下移至所有浮动元素底部；需满足三条件：必须是块级元素、DOM位置在浮动元素之后、父容器能容纳其高度。
为什么 clear: both 空元素能强制换行
浮动元素会脱离文档流，后续块级元素会“无视”它的存在，继续从顶部开始布局，导致布局塌陷或错位。插入一个带 clear: both 的空元素（如 <div style="clear:both"></div>），本质是让该元素拒绝与任何浮动元素并排，必须下移到所有左侧和右侧浮动元素的底部，从而形成视觉上的“换行”效果。
怎么写才真正生效：三个关键点
常见失效不是因为语法错，而是忽略了上下文约束：
-
clear: both只对**块级元素**有效 —— 如果用<span></span>或设置了display: inline，它完全不生效 - 该元素必须位于浮动元素的**DOM 后续位置**，不能提前、不能包裹、不能用伪元素模拟（
::after需配合content: ""和display: block才等效） - 父容器若设置了
height: 0或overflow: hidden等收缩行为，可能遮盖掉这个“换行”位置，需确保父容器能容纳新增高度
clear: both 空元素 vs clearfix 的实际取舍
虽然 clearfix 是更现代的方案，但直接插空元素仍有其适用场景：
- 需要在**特定两组浮动之间**精确控制换行（比如第3个卡片后强制断行），而非整个容器清浮动
- 项目受限于旧版 CMS 或模板系统，无法修改父容器 class 或样式表，只能在 HTML 中临时加节点
- 动态插入内容时，JS 更容易 append 一个
<div style="clear:both"></div>，比 patch 父元素 class 更轻量
注意：clear: both 不解决父容器高度塌陷问题，它只影响自身及后续兄弟元素的位置；若目标是让父容器包裹住全部浮动子项，仍需用 clearfix 或 overflow: auto 等方案。
兼容性与潜在副作用
这个方法在所有浏览器中都可靠，包括 IE6+，但它会引入无语义的 DOM 节点：
- 屏幕阅读器可能误读为空白内容（可加
aria-hidden="true"抑制） - 大量使用会让 HTML 显得冗余，尤其在循环渲染列表时，建议优先用 CSS Grid / Flexbox 替代浮动布局
- 若空元素被意外设置 margin/padding/border，会导致不可预期的额外空白，推荐显式重置：
<div style="clear:both; height:0; font-size:0; line-height:0;"></div>
浮动本身已是过时布局模式，现在遇到“必须换行”的需求，大概率说明结构设计可以更合理 —— 比如用 flex-wrap 控制换行点，或用 grid-template-columns 定义显式轨道，比塞空元素干净得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
