浮动导致父容器高度塌陷使背景色不显示；可用overflow:hidden触发BFC、display:flow-root（现代推荐）或::after伪元素法清除浮动，选择取决于兼容性、溢出需求及语义化要求。
浮动导致父容器高度塌陷，背景色不显示
这是浮动最经典的问题：当子元素使用 float: left 或 float: right 后，父容器会“看不见”它们的高度，计算高度时当作 0，于是 background-color 只在 0 高度区域渲染，看起来就像没生效。
用 overflow: hidden 快速触发 BFC 清除浮动
这是最轻量、兼容性好（IE6+）的解决方式，原理是让父容器创建新的块级格式化上下文（BFC），从而包含浮动子元素。
- 只适用于父容器没有溢出内容（如下拉菜单、阴影外扩、绝对定位越界）的场景
- 不要设
overflow: visible（默认值），那等于没清 - 慎用
overflow: auto，滚动条可能意外出现
.container {
background-color: #f0f0f0;
overflow: hidden; /* 关键：触发 BFC */
}现代项目优先用 display: flow-root
这是专为清除浮动设计的 CSS 值，语义清晰、无副作用，Chrome 64+/Firefox 58+/Safari 15.4+ 支持。
- 不会影响溢出行为，比
overflow: hidden更安全 - 不改变盒模型类型（仍是块级容器），不影响 flex/grid 布局嵌套
- IE 完全不支持，需确认目标环境
.container {
background-color: #f0f0f0;
display: flow-root; /* 推荐：干净、精准、无副作用 */
}
伪元素清除法（::after）兼顾兼容与可控
通过在父容器末尾插入一个清除浮动的伪元素，兼容 IE8+，且完全可控，适合需要精细控制或兼容老项目的场景。
立即学习“前端免费学习笔记（深入）”；
- 必须设置
content: ""，否则伪元素不生成 -
clear: both要写在伪元素上，不是父容器上 - 记得设
display: table或block，否则clear不生效
.container {
background-color: #f0f0f0;
}
.container::after {
content: "";
display: table;
clear: both;
}真正容易被忽略的是：清除浮动不是目的，让父容器正确参与文档流高度计算才是。选哪种方法，取决于你是否要支持 IE、有没有溢出内容、以及团队对语义化的重视程度。
