父容器背景“断掉”是因高度塌陷为0，浮动子元素脱离文档流；overflow:hidden虽能触发BFC临时修复，但会裁剪绝对定位内容、语义不清；推荐display:flow-root（现代标准）或clearfix伪元素（content:"";display:table;clear:both）精准解决。
父容器背景色“断掉”或只显示一行，不是 background-color 没生效，而是父容器高度塌陷成了 0 —— 所有浮动子元素都脱离了文档流，浏览器压根没把它们算进父容器高度里。
为什么 overflow: hidden 能临时修复但不推荐
给父容器加 overflow: hidden 或 overflow: auto 确实能触发 BFC，让父容器重新包含浮动子元素，背景也就“回来”了。但它副作用明显：
- 会意外裁剪
position: absolute的下拉菜单、弹窗、阴影或 transform 位移后的内容 - 在某些缩放比例下可能触发不必要的滚动条
- 语义不清：你本意是设背景，却被迫改了溢出行为
clearfix 伪元素怎么写才真正起作用
用 .clearfix::after 是目前兼容性最好、副作用最小的清除方式，但必须写全三要素，漏一个就失效：
-
content: ""必须存在，否则伪元素不生成 -
display: table比block更稳妥，避免老浏览器中 margin 折叠干扰 -
clear: both必须放在伪元素上，且该伪元素得在浮动子元素之后（::after 天然满足）
正确写法：
.clearfix::after { content: ""; display: table; clear: both; }然后在 HTML 中给父容器加 class="clearfix"。
立即学习“前端免费学习笔记（深入）”；
display: inline-block 替代 float 更干净
如果你只是想让几个块水平排列（比如导航项、图标组），float 已不是首选。改用 display: inline-block 后：
- 子元素保留在文档流中，父容器自动撑高，背景完整渲染
- 无需额外清除逻辑，HTML 更干净，CSS 更易维护
- IE8+ 全支持，比
display: flow-root兼容性更广
注意：inline-block 元素间默认有空白间隙，可用 font-size: 0 在父容器上消除，再单独给子元素设 font-size 补回。
现代项目优先用 display: flow-root
如果只需解决“包含浮动 + 不裁剪内容”这个单一问题，display: flow-root 是最精准的方案：
- 它专为创建无副作用的 BFC 而生，不会像
overflow: hidden那样裁剪内容 - 一行 CSS 就搞定，不用写伪元素、不用改 HTML 结构
- Chrome 58+、Firefox 53+、Safari 10.1+、Edge 16+ 都支持；仅 IE 完全不支持
写法就是直接给父容器加 display: flow-root，其他样式照常。
最容易被忽略的一点是：即使你用 clearfix 或 flow-root 修好了背景，浮动本身仍在影响周围——比如兄弟元素的 margin-collapse 可能失效，z-index 层级可能错乱，position: absolute 的定位基准也可能偏移。修完背景，务必打开开发者工具检查整体渲染是否如预期。
