当对包含浮动元素的 div 设置 background-color 时，常出现背景仅覆盖单行高度、无法撑满整个内容区域的问题——这是因为浮动元素脱离文档流，导致父容器高度塌陷。本文将用现代、简洁的方式解决该问题。
当对包含浮动元素的 div 设置 background-color 时，常出现背景仅覆盖单行高度、无法撑满整个内容区域的问题——这是因为浮动元素脱离文档流，导致父容器高度塌陷。本文将用现代、简洁的方式解决该问题。
在 CSS 布局中，float 曾是实现多列排列的常用手段，但它会引发一个经典陷阱：浮动元素不参与父容器的高度计算。因此，即使你为外层 <div class="c"> 设置了 background-color: rgb(185, 185, 185)，其实际渲染高度可能仅为 <h4> 的行高（约 20–30px），而完全“忽略”下方所有 float: left 的 <p> 元素——这就是你看到背景只显示一行、无法包裹全部内容的根本原因。
虽然传统方案如 clearfix（清除浮动） 或 overflow: hidden 可以修复高度塌陷，但它们属于“补救式”技巧，增加了代码复杂度与维护成本。更推荐的做法是：从根本上避免使用 float 进行布局。
✅ 推荐解法：改用 display: inline-block
inline-block 兼具块级元素的尺寸控制能力（可设 width/height/line-height）和行内元素的横向排列特性，无需脱离文档流，父容器自然能正确计算高度并完整渲染背景：
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 0 0; /* 水平间距，替代 float 的间隙控制 */
}
.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>
⚠️ 注意事项：
- inline-block 元素间默认存在由换行符/空格引起的 约 4px 水平间隙。若需严格对齐，可将父容器 font-size: 0，再为子元素单独设置 font-size；或移除 HTML 中 <p> 标签间的空白符。
- 若需响应式或更复杂布局（如自动换行、等分布局），建议进一步升级为 Flexbox：对 .c 添加 display: flex; flex-wrap: wrap;，子元素无需 inline-block 即可完美对齐并撑开背景。
- 原代码中存在拼写错误（如 10s0px → 100px，20spx → 20px），务必检查单位书写规范。
总结：与其花 1.5 小时调试 clear:both 为何失效，不如用 display: inline-block 或 display: flex 重构布局逻辑——语义清晰、兼容良好（IE9+）、无副作用，这才是现代前端开发的高效实践。
