当对包含 float 元素的 设置 background-color 时，背景往往只显示在“行内高度”区域而非整个块级容器——这是因浮动导致父容器高度塌陷所致；本文提供简洁可靠的解决方案。

当对包含 `float` 元素的 `

` 设置 `background-color` 时，背景往往只显示在“行内高度”区域而非整个块级容器——这是因浮动导致父容器高度塌陷所致；本文提供简洁可靠的解决方案。

在 CSS 布局中，一个常见却易被忽视的问题是：给包含浮动子元素（如 float: left）的父

设置背景色后，背景仅覆盖首行内容高度，而非整个视觉区块。这并非样式失效，而是浏览器渲染机制导致的「高度塌陷」（height collapse）——浮动元素脱离文档流，父容器无法自动包裹其高度，因此 background-color 只作用于计算出的（近乎为零的）高度范围。

你提供的代码中，.c 类设置了 background-color: rgb(185, 185, 185)，但其内部所有

均使用 float: left，导致 .c 实际高度为 0（仅由

贡献少量高度），因此背景无法撑满预期区域。

✅ 推荐方案：改用 display: inline-block 替代 float

现代布局中，float 已不再推荐用于常规行内排列。使用 display: inline-block 可在保持水平排列的同时，让父容器自然包裹子元素高度：

div.c {
  background-color: rgb(185, 185, 185);
  padding: 16px; /* 可选：增加内边距提升视觉完整性 */
}

div.c h4 {
  color: navy;
  margin: 0 0 12px 0; /* 清除默认上下边距，避免干扰高度计算 */
}

div.c p {
  display: inline-block;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 20px;
  margin: 0 8px; /* 可选：控制元素间距 */
}

.b { background-color: gold; }
.a { background-color: gainsboro; }

对应 HTML 保持简洁：

<div class="c">
  <h4>HOMEWORK</h4>
  <p class="b">일</p>
  <p class="a">이</p>
  <p class="b">삼</p>
  <p class="a">사</p>
</div>

✅ 此方案优势明显：

• 父容器 .c 能准确计算并包裹所有子元素高度；
• 无需额外清除浮动（如 clearfix 或 clear: both）；
• 语义清晰、兼容性好（支持 IE8+）；
• 更易于后续响应式扩展（如配合 vertical-align 或 flex 升级）。

⚠️ 注意事项与补充说明

• 避免混用 float 和 inline-block：同一容器内不应同时使用两种布局方式，否则可能引发不可预测的间隙或对齐问题。

• inline-block 的空白符问题：HTML 中

  标签间的换行和空格会被渲染为 4px 左右空白。若需严格等距，可将父容器字体大小设为 0，再为

  单独设置字体大小，或采用注释法/负 margin 技巧。

• 进阶建议：对于新项目，更推荐使用 Flexbox 实现同类布局（一行代码即可解决）：

  .c {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* 替代 margin 控制间距 */
    align-items: center;
  }
  .c p {
    flex: 0 0 100px; /* 不伸缩、不压缩、固定宽度 */
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

综上，放弃为浮动布局“打补丁”，转而采用语义更合理、行为更可预测的 inline-block 或 flex 方案，是解决父容器背景不生效问题的根本之道。