clear: both 加在空标签上能“撑开”父容器，是因为该块级元素参与文档流并下移至所有浮动元素下方，从而强制父容器包含其高度。
为什么 clear: both 加在空标签上能“撑开”父容器
浮动元素会脱离文档流，导致父容器高度塌陷——这不是 bug，是 CSS 规范定义的行为。加一个空 <div></div> 并设置 clear: both，本质是插入一个**参与文档流的块级元素**，它会强制下移至所有前面浮动元素的下方，从而把父容器底部“顶”下来。
常见错误是把 clear: both 写在浮动元素自己身上（没用），或写在父容器上（无效，clear 只对自身生效且要求是块级、非浮动）。
- 必须是块级元素（
<div>、<code><p></p>等），<span></span>默认不生效 - 该元素不能浮动（否则
clear失效） - 它得放在所有浮动子元素的后面（DOM 顺序很重要）
- Chrome/Firefox/Safari/Edge：表现稳定，无需额外 hack
- IE8+：完全可靠
- IE6/7：若父容器已通过
overflow: hidden清浮动，再加空标签会导致父容器高度被二次计算，出现多余空白
clear: both 在不同浏览器中的兼容性表现
这个声明从 IE6 开始就完全支持，没有兼容性问题。但要注意：IE6/7 对 hasLayout 的依赖会让某些场景下“清浮动失败”，比如父容器设置了 zoom: 1 或 overflow: hidden 后再加空标签，反而可能引发双清浮动或高度异常。
现代项目中，只要不主动触发 IE 的 hasLayout 模式（如避免给父容器设 height、zoom），空标签 + clear: both 在所有浏览器里行为一致。
比空标签更轻量的替代写法
空标签语义差、增加无意义 DOM 节点，实际开发中应优先考虑其他方式。伪元素方案（::after）是目前最主流的替代：
.clearfix::after {
content: "";
display: table;
clear: both;
}
.clearfix {
*zoom: 1; /* IE6/7 */
}
注意这里用了 display: table 而不是 block，是因为 table 类型能天然避免 IE6/7 下的 margin 双倍问题；而 *zoom: 1 是为老 IE 触发 hasLayout，补全清除效果。
- 不要用
display: block+height: 0：在某些 IE 版本下无法正确撑高 - 不要只写
::after不加display: table或display: block：伪元素默认 inline，clear不生效 - CSS-in-JS 或 Shadow DOM 场景下，伪元素可能被作用域隔离，此时空标签反而更可控
什么时候还不得不回退到空标签
当项目受限于老旧构建工具（如不支持伪元素注入）、需要服务端渲染且模板层无法动态加 class、或第三方组件库强制覆盖了父容器样式时，空标签仍是最快落地的解法。
关键不是“能不能用”，而是“要不要多一层抽象”。如果只是临时修复某个 CMS 输出的 HTML，直接加 <div style="clear:both"></div> 比改构建配置快得多。
- 确保空标签在浮动元素之后、父容器闭合前 —— 放错位置等于没清
- 避免用
<br clear="both">：HTML5 已废弃clear属性，且语义混乱 - 若用 React/Vue，别在循环里每个 item 后都加一个空
div，应该把clear放在整个列表容器末尾
清浮动的本质不是“清除浮动”，而是让后续内容感知到浮动元素的边界。空标签只是最直白的实现手段，它的价值恰恰在于简单、可预测、不依赖上下文——这点在紧急修复和遗留系统里，比“优雅”更重要。
