CSS 背景色无法撑满父容器？解决浮动导致的高度塌陷问题

当子元素使用 float 时，父容器会因高度塌陷而无法正确显示背景色；本文详解原因并提供现代、可靠的解决方案——用 display: inline-block 替代 float，兼顾布局控制与语义清晰。 当子元素使用 `float` 时，父容器会因高度塌陷而无法正确显示背景色；本文详解原因并提供现代、可靠的解决方案——用 `display: inline-block` 替代 `float`，兼顾布局控制与语义清晰。在 CSS 布局中，一个常见却令人困惑的问题是：为父 <div> 设置了 background-color，但颜色只覆盖到第一行内容（甚至仅文字基线附近），而非整个可视区块。如示例中 .c 容器本应呈现灰色背景，却“消失”在标题和浮动段落之下——这并非样式失效，而是浮动元素脱离文档流导致父容器高度塌陷（collapsing height） 的典型表现。根本原因在于：float 会使元素脱离普通文档流，父容器无法感知其尺寸，因此计算自身高度时忽略所有浮动子元素，最终高度可能退化为 0（仅含内联内容或空隙），致使背景色无处可展。? 推荐方案：改用 display: inline-block相比过时的 float 布局，inline-block 在保持水平排列能力的同时，完全保留在文档流中，父容器能自然包裹其高度：.c { background-color: rgb(185, 185, 185); /* 全宽全高生效 */}div p { display: inline-block; /* 关键：替代 float */ width: 100px; line-height: 100px; text-align: center; font-size: 20px; /* 修正原代码中的拼写错误：20spx → 20px */ margin: 0; /* 可选：消除默认段落外边距 */}.b { background-color: gold; }.a { background-color: gainsboro; }对应 HTML 结构保持简洁： 稿定AI 拥有线稿上色优化、图片重绘、人物姿势检测、涂鸦完善等功能