clear: both 本身不产生间距，所谓“多余空白”实际来自清除元素的默认 margin、父容器 line-height 影响或浮动容器自身的 padding-bottom/margin-bottom。
clear: both 本身不产生间距，过大的空白来自哪
很多人以为 clear: both 会“自动加空隙”，其实它只做一件事：把当前元素的上边界推到前面所有浮动元素的下边界之下。它不添加 margin、不改变 line-height、也不触发 padding。所谓“间距过大”，90% 是以下三者之一在起作用：
- 清除元素自身带了默认 margin（比如
h2、p、ul等原生块级标签） - 父容器有非零
line-height或font-size，而清除元素是空的 inline-level 元素（如未设display: block的<div>） <li>浮动容器本身有 <code>padding-bottom或margin-bottom，被误认为是 clear 导致的 - 如果
margin-top是 2rem（比如来自h2默认样式），直接覆盖：h2 { margin-top: 0.5rem; } - 如果清除元素是空
<div class="clear-fix"></div>，且 computed 中height显示为 18px 或类似值，说明它受父容器line-height影响——给它加display: block; height: 0; font-size: 0; line-height: 0; - 如果清除元素的
margin-top是 0，但和上一个浮动块之间仍有空隙，那空隙大概率来自浮动块自身的margin-bottom或其父容器的padding-bottom，不是 clear 的锅 - 解决办法很简单：显式重置它的外边距：
.clearfix::after { margin: 0; } - 更稳妥的现代写法是改用
display: block：.clearfix::after { content: ""; display: block; clear: both; height: 0; overflow: hidden; } - 注意不要同时给父容器设
overflow: hidden和.clearfix——前者可能让后者失效，尤其在旧版 Safari 中 - 给浮动元素的直接父容器设
display: flow-root，它既能创建 BFC 包裹浮动，又不会像overflow: hidden那样裁剪position: absolute子项或阴影 - 真正的垂直间距，交给父容器的
gap（如果子项是 flex/grid）或统一的margin-bottom类（如.mb-4）来管理，和浮动解耦 - 这样你就不用再纠结“clear 后该加多少 margin”——因为根本不需要 clear 了
如何快速定位并缩小那个“多余空白”
打开浏览器开发者工具，选中那个看似“被 clear 推远”的元素，看 computed 面板里的 margin-top 和 margin-bottom 值。常见情况和对应操作：
为什么用 clearfix::after 清除后还多出一截空白
.clearfix::after 的典型写法是：content: ""; display: table; clear: both;。这个伪元素本身会生成一个“匿名表格单元格”，而 display: table 在多数浏览器中会带来约 1em 的默认 margin-top 和 margin-bottom。
现代项目里，比 clear + 手动调 margin 更稳的方案
如果你控制得了 HTML 结构和浏览器支持范围（Chrome 64+/Firefox 58+），优先用 display: flow-root 替代清除逻辑：
真正容易被忽略的点是：清除浮动从来不是目的，让布局可预测才是。而可预测性，来自把“位置控制”和“间距控制”拆开，各自负责，互不干扰。
