浮动元素导致父容器高度塌陷，背景“消失”实为高度变为0；应使用clearfix伪元素或display: flow-root解决，而非给父容器加clear:both。

为什么浮动元素后面父容器背景会消失

因为浮动元素脱离了文档流，父容器计算高度时直接忽略它们，导致高度塌陷——看起来就像背景“不见了”。这不是背景没生效，是父容器实际高度变成0了。

• 常见错误现象：div设置了background-color，但只看到顶部一小条色块，或完全看不到背景
• 检查方法：打开浏览器开发者工具，选中父容器，看Computed里的height是不是0px
• 触发条件：子元素用了float: left或float: right，且父容器没设置固定高度或清除机制

clear: both 为什么不能直接加在父容器上

clear作用对象是“自身”，不是子元素。给父容器加clear: both毫无效果，它既不清除子元素的浮动，也不影响自身高度计算。

• 正确位置：必须加在浮动元素之后的某个兄弟元素上（比如<div style="clear: both"></div>）
• 更常见的写法是用伪元素，避免额外DOM节点：::after + content: "" + clear: both
• 注意display：伪元素默认是inline，必须设为block或table才能生效

推荐的clearfix方案及兼容性差异

现代项目优先用display: flow-root，老项目用clearfix类。两者都比overflow: hidden更安全。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

• display: flow-root：一行解决，无副作用，Chrome 58+/Firefox 53+/Safari 10.1+ 支持，IE不支持
• clearfix经典写法：

  .clearfix::after {
    content: "";
    display: table;
    clear: both;
  }

• 别用overflow: hidden：虽然能撑开高度，但会意外裁剪position: absolute子元素或阴影

Flex/Grid 布局下还用担心浮动吗

基本不用。一旦父容器设了display: flex或display: grid，子元素即使有float也会被忽略，高度自动包含。

立即学习“前端免费学习笔记（深入）”；

• 但要注意：float本身仍会生效（比如文字环绕），只是不影响布局流和父容器高度
• 真正想“清除浮动”的场景，往往说明你还在用传统浮动布局——这时候该考虑是否该迁移到Flex或Grid了
• 如果必须保留浮动（如兼容旧代码），就老老实实用clearfix或flow-root，别指望Flex容器帮你“顺带”解决

浮动问题表面是背景不见，根子在文档流脱离。最易被忽略的是：很多人修好了高度，却忘了浮动仍在影响其他样式（比如margin-collapse失效、z-index层级错乱）。修完记得再扫一眼周围元素的表现。