浮动元素导致父容器高度塌陷，背景显示不全；推荐用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，但别依赖它撑结构。
立即学习“前端免费学习笔记（深入）”；