清除浮动后空白间隙怎么解决

• clear: both 必须作用于紧跟在浮动元素之后、且参与正常流的块级元素（比如

  、

  ）
• 如果后续元素是 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: ""，这是最常漏掉的一行

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《清除浮动后空白间隙怎么解决》文章吧，也可关注golang学习网公众号了解相关技术文章。