浮动元素导致父容器高度塌陷，背景显示不全；推荐用 clearfix 清除浮动，即父容器加 class=”clearfix” 并定义。clearfix::after{content:””;display:table;clear:both}；其他方法如 padding+background-clip、overflow:hidden、display:flow-root 等各有局限。
浮动元素会让父容器高度塌陷，导致背景颜色只显示在“看不见”的高度范围内，看起来就像断掉了。本质是父容器没包裹住浮动子元素，背景自然就铺不满。
用 clearfix清除浮动（推荐）
给父容器添加一个通用的 clearfix 类，能强制它包含内部浮动元素，高度恢复正常，背景也就连贯了。
- 在 CSS 中定义：
.clearfix::after {
content: “”;
display: table;
clear: both;
}
- HTML 里给父容器加上 class=”clearfix”
- 这个方法兼容性好，语义清晰，不影响布局流，是最稳妥的解法
给父容器加 padding + background-clip
如果不想改结构或已有 clearfix 冲突，可以临时绕过高度塌陷问题：让背景“假装”延伸出来。
- 给父容器加一点上下 padding（比如 padding: 1em 0）
- 同时设置 background-clip: padding-box（默认值，可不写），确保背景只铺在 padding 区域，不溢出到 border
- 注意：这属于视觉补偿，实际高度仍塌陷，后续元素可能错位，仅适合简单场景
其他可行但需谨慎的方式
- overflow: hidden 或 overflow: auto：能触发 BFC，让父容器包含浮动，但可能意外截断内容或出现滚动条
- display: flow-root：现代写法，干净利落，但 IE 完全不支持
- 直接给父容器设固定 height：仅限高度确定的静态布局，缺乏弹性
基本上就这些。优先用 clearfix，简洁可靠；临时补救可用 padding+background-clip，但别依赖它撑结构。
立即学习 “ 前端免费学习笔记（深入）”；
以上就是
