父容器背景色消失是因浮动元素脱离文档流导致高度塌陷；清除浮动可用末尾加clear: both的占位元素，或clearfix伪类，但现代布局应优先使用Flex/Grid。

父容器背景色消失是因为浮动元素脱离文档流

只要子元素用了 float，它就不再参与父容器的高度计算，父容器高度塌陷成 0，背景色自然“看不见”。这不是 CSS bug，是浮动的原始设计行为——它本就为文字环绕图片服务，不是为布局而生。

• 常见错误现象：div 设了 background-color，但页面上完全不显示，用开发者工具看该元素高度是 0px
• 使用场景：老项目维护、兼容 IE8–9、或某些 CMS 输出的 HTML 无法改结构时，仍需靠浮动做两栏布局
• 别指望只加 overflow: hidden 就万事大吉——它虽能触发 BFC 清除浮动，但会意外裁剪 position: absolute 子元素或 box-shadow

在父容器末尾加 clear: both 块是最直白的解法

本质是插入一个“占位元素”，强制下压到所有浮动元素下方，撑开父容器。它不依赖 BFC，兼容性极好（IE6+ 都行），且语义清晰。

• HTML 写法：

  <div class="container">
    <div class="float-left">左栏</div>
    <div class="float-right">右栏</div>
    <div style="clear: both;"></div>
  </div>

• CSS 可抽成类：.clearfix::after 是更省 HTML 的写法，但如果你只改一小块旧代码，插个
  更快、更可控
• 注意：这个清除块必须放在所有浮动子元素之后，且不能设 display: none 或 visibility: hidden，否则无效

overflow: hidden 看似简单，但容易踩布局坑

它让父容器生成新的 BFC，从而包含浮动子元素，高度恢复正常。但副作用真实存在，不是“加了就行”。

CSS工具箱(专业版)

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

下载

• 如果子元素用了 position: absolute 且超出父容器边界，会被直接裁剪（比如下拉菜单、tooltip）
• 父容器若有 border-radius 和 overflow: hidden，圆角会生效，但若同时有 box-shadow，阴影也会被裁掉
• 在 Flex 或 Grid 布局中混用 overflow: hidden 清浮动，可能干扰主轴对齐行为，尤其当子项用 margin 微调位置时

现代项目优先用 Flex/Grid，别硬扛浮动

浮动不是布局工具，是排版遗留物。2024 年还靠 float 做整页布局，等于主动给自己套兼容性枷锁。

• 两栏布局？display: flex 一行搞定，flex: 1 自动均分，无高度塌陷问题
• 响应式多列？display: grid 配 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) 更稳
• 真要兼容老浏览器（如 IE10），用 display: -ms-flexbox + display: flex 双写，比修浮动的坑成本低得多

浮动本身没消失，但它早就不该出现在布局逻辑里。清除浮动只是补救手段，而不是解决方案。真正难的不是加那一行 clear: both，而是判断——这段代码，到底还值不值得用浮动。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！