浮动元素导致父容器高度塌陷，背景显示不全；推荐用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冲突，可以临时绕过高度塌陷问题：让背景“假装”延伸出来。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 给父容器加一点上下padding（比如padding: 1em 0）
• 同时设置background-clip: padding-box（默认值，可不写），确保背景只铺在padding区域，不溢出到border
• 注意：这属于视觉补偿，实际高度仍塌陷，后续元素可能错位，仅适合简单场景

其他可行但需谨慎的方式

• overflow: hidden 或 overflow: auto：能触发BFC，让父容器包含浮动，但可能意外截断内容或出现滚动条
• display: flow-root：现代写法，干净利落，但IE完全不支持
• 直接给父容器设固定height：仅限高度确定的静态布局，缺乏弹性

基本上就这些。优先用clearfix，简洁可靠；临时补救可用padding+background-clip，但别依赖它撑结构。

立即学习“前端免费学习笔记（深入）”；