空标签法不推荐，因其语义污染、维护成本高、兼容性隐患；clear: both仅对块级兄弟元素生效，须置于浮动元素后且需height: 0等补丁；现代应优先用display: flow-root或伪元素清除。
直接加空标签 <div style="clear: both"></div> 能起作用，但它是过时且高风险的写法，不建议在新项目中使用。
为什么空标签法现在不推荐
它看似简单，实则引入三个硬伤：语义污染、维护成本高、兼容性隐患。
- 空
<div>没有任何语义，纯为“修复布局”而存在，违背 HTML 结构即内容的原则 - 每个浮动容器都要手动加一行无意义 DOM，后期改布局时极易漏删或重复添加
- IE6/7 下若该空标签没设
zoom: 1或height: 0，仍会塌陷；而现代框架（如 React/Vue）里动态渲染时，空标签还可能被优化掉
clear: both 必须加在谁身上才有效
它只对自身生效，且仅作用于块级元素的外边距计算——不是“清掉浮动”，而是“让当前元素避开前面所有浮动”。
- 写在浮动子元素自己身上（如
.item { float: left; clear: both; }）完全无效 - 写在父容器上（如
.parent { clear: both; }）也无效，因为clear不影响子元素高度计算 - 必须加在浮动元素的**直接后续兄弟节点**上，且该节点需是块级（
display: block或table） - 若该兄弟节点有默认
margin-top或line-height，会额外撑开空白，建议显式设height: 0; font-size: 0;
如果非得用空标签，怎么写才不出错
仅限老项目维护或 IE8- 场景下兜底，需同时满足以下四点：
立即学习“前端免费学习笔记（深入）”；
- 空标签必须紧跟在最后一个浮动子元素闭合标签之后，不能被其他浮动干扰
- 必须设
clear: both，且不能只靠它——还要加height: 0; overflow: hidden;防止默认行高撑开 - IE6/7 必须补
zoom: 1触发 hasLayout，否则仍塌陷 - 不能用
<span>这类内联元素，必须是块级标签（<div>、<p>等）
真正该盯住的不是“怎么清”，而是“要不要清”
只要父容器用了 display: flex 或 display: grid，子元素根本不会脱离文档流，clear 和 clearfix 全部失效且多余；如果只是图文环绕（比如 <img> 浮左+文字绕排），直接用 float: left + shape-outside，也不需要清除。
空标签法现在存在的唯一合理场景，是维护一段无法重构的 IE8 旧代码。除此之外，任何新写的 HTML 都不该再出现 <div style="clear:both"></div>。
