浮动元素后面为什么总有看不见的空白？
因为浮动元素脱离了文档流，后续块级元素会“无视”它原本占位，但行内内容仍会绕排——浏览器渲染时会保留浮动前最后一行基线到容器底边的距离，形成视觉上的空白间隙。这不是 bug，是 CSS 规范里明确定义的 clear 行为前提。
用 clear 清除浮动后空白的正确姿势
直接在浮动元素后的第一个块级元素上加 clear: both，不是给父容器加，也不是随便套个空 <div> 就完事。
<ul><li>
<code>clear: both 必须作用于紧跟在浮动元素之后、且参与正常流的块级元素（比如 <p></p>、<div>）
<li>如果后续元素是 <code>inline 或 inline-block，clear 无效——得先让它变成块级（display: block）
clear: left 或 clear: right 来碰运气，除非你确定只有一侧浮动且没其他干扰<div style="float: left">左浮</div><br><p style="clear: both">这段文字会下移，避开浮动</p>
为什么父容器高度塌陷 + 后续空白经常一起出现？
这是同一根源的两个表现：浮动脱离文档流 → 父容器无法感知高度 → 容器底边“提前结束” → 后续元素从这个错误底边开始布局，间隙就出来了。
- 只靠
clear能解决后续空白，但不修复父容器塌陷；要两者都治，得让父容器“重新包含”浮动，比如用overflow: hidden或display: flow-root -
display: flow-root是现代解法，兼容性 OK（Chrome 58+/Firefox 53+/Safari 10.1+），比 BFC 黑魔法更语义清晰 - 老项目用
overflow: hidden要小心：如果子元素有position: absolute且超出父边界，会被裁掉
clear 和 float 已经过时了吗？
没完全过时，但新项目里几乎不该主动用 float 布局。CSS Grid 和 Flexbox 才是处理多列、对齐、空间分配的正解。
立即学习“前端免费学习笔记（深入）”；
-
float现在只该出现在纯文本环绕场景（比如图片左浮、文字绕排），其他情况用display: flex或display: grid - 一旦用了 Flex/Grid，
clear就彻底无用武之地——它们天然不脱离文档流 - 还在维护老代码？重点检查
clear是否被写在伪元素（::after）里却忘了设content: ""，这是最常漏掉的一行
clear，而是判断该清哪一层、谁该负责收尾、以及什么时候该果断放弃 float 改用现代布局。
