父容器背景色消失是因浮动元素脱离文档流导致高度塌陷；清除浮动可用末尾加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 的写法，但如果你只改一小块旧代码，插个<div style="clear: both;"></div>更快、更可控 - 注意：这个清除块必须放在所有浮动子元素之后，且不能设
display: none或visibility: hidden，否则无效
overflow: hidden 看似简单，但容易踩布局坑
它让父容器生成新的 BFC，从而包含浮动子元素，高度恢复正常。但副作用真实存在，不是“加了就行”。
- 如果子元素用了
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，而是判断——这段代码，到底还值不值得用浮动。 
