当子元素使用 float 时，父容器会因高度塌陷而无法正确显示背景色；本文详解原因并提供现代、可靠的解决方案——用 display: inline-block 替代 float，兼顾布局控制与语义清晰。
当子元素使用 `float` 时，父容器会因高度塌陷而无法正确显示背景色；本文详解原因并提供现代、可靠的解决方案——用 `display: inline-block` 替代 `float`，兼顾布局控制与语义清晰。
在 CSS 布局中，一个常见却令人困惑的问题是：为父
设置了 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 结构保持简洁：
<div class="c"> <h4>HOMEWORK</h4> <p class="b">일</p> <p class="a">이</p> <p class="b">삼</p> <p class="a">사</p> </div>
? 小技巧：若需进一步控制水平间距，可对 .c 设置 font-size: 0 消除 inline-block 元素间的空白间隙，再为
单独设置 font-size；或使用 flexbox（更现代）作为进阶替代方案。
⚠️ 注意事项与对比说明
- ❌ clear: both 本身不解决塌陷：它仅影响后续兄弟元素的定位，无法让父容器“重新计算高度”。
- ❌ overflow: hidden 或伪元素 clearfix 虽可强制包含浮动，但属于兼容性补丁，增加冗余且不利于维护。
- ✅ inline-block 语义清晰、浏览器支持极佳（IE8+），无需额外 hack，是轻量级横向布局的理想选择。
- ? 若需响应式或复杂对齐（如垂直居中、等分布局），建议直接升级至 display: flex —— .c { display: flex; flex-wrap: wrap; } 即可优雅替代全部浮动逻辑。
掌握这一原理，不仅能修复背景色异常，更能帮助你识别和规避更多由脱离文档流引发的布局陷阱。告别“调了 1.5 小时却不见效”的挫败感，从理解流式布局的本质开始。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
