clear: both不能直接写在空标签上生效，是因为空标签若未显式设height: 0、overflow: hidden且display: block，易被行高或字体撑开或折叠，且clear仅对块级、文档流中紧邻浮动后的元素有效。
clear: both 为什么不能直接写在空标签上就生效
很多人试过在浮动元素后面加一个 <div></div>，然后给它加 clear: both，结果发现没用——大概率是因为这个空标签没“撑开”，或者被浏览器折叠了。空标签默认是 display: inline（实际是 display: block，但若父容器有塌陷、或自身无高度/内容，仍可能视觉上消失），clear 只对块级元素生效，且必须处于正常文档流中。
实操建议：
- 空标签必须设为
display: block（虽然<div>默认就是，但若被全局样式重置过，就得显式声明） - 确保它紧跟在浮动元素之后，且不在浮动容器内部被“隔离”（比如父容器用了
overflow: hidden或display: flow-root，反而让 clear 失效） - 避免用
<span>这类内联标签做清除，除非手动设display: block
最简可用的空标签清除写法
不是所有空标签都等价。下面这行是经过验证、兼容 IE8+ 的最小可靠写法：
<div style="clear: both; height: 0; overflow: hidden;"></div>
说明：
立即学习“前端免费学习笔记（深入）”；
-
clear: both是核心，告诉浏览器“本元素不允许和左右任何浮动元素并排” -
height: 0防止空<div>因行高或字体导致意外高度 -
overflow: hidden是关键补丁：它触发 BFC，确保该元素能正确感知并“推开”上方浮动，尤其在旧版 Chrome 和 Safari 中缺它容易失效
clear both 在 flex 或 grid 布局里还管用吗
不管用。clear 是专为 float 浮动设计的 CSS 属性，在 display: flex 或 display: grid 容器中完全无效——因为浮动元素本身已被移出文档流，而 flex/grid 子项天然不参与 float 流程。
如果你在 flex 容器里看到“浮动残留”，通常意味着：
- 你误把
float和align-self/justify-content混用了 - 父容器其实没真正设成 flex（比如漏写了
display: flex，或被其他样式覆盖） - 清除目标其实是 flex 外部的遗留浮动块，此时
clear: both仍可作用于 flex 容器本身（只要它是块级）
现代项目里为什么越来越少用空标签 clear both
空标签本质是 hack，它污染 HTML 结构、增加无语义节点、不利于维护。现在更主流的做法是：
- 用
overflow: hidden或display: flow-root给浮动父容器“包住”子浮动（推荐后者，语义清晰且无副作用） - 用伪元素清除：
::after { content: ""; display: table; clear: both; }，干净、无需额外 HTML - 直接放弃 float 布局，改用 flex 或 grid —— 这才是根本解，
clear自然退场
真正需要空标签 clear 的场景，基本只剩老系统兼容或 CMS 输出不可控 HTML 的边缘情况。动手前先确认：你是不是还在用 float 做整体布局？如果是，那问题不在 clear，而在布局模型本身。
