div标签background-color仅作用于一行而非整块的解决求助

核心原因是浮动子元素导致父容器高度塌陷，clear:both只作用于单个元素，无法让父容器包裹浮动内容，以下是几种有效解决方案：

• 方案1：触发BFC（简单快捷）
  给父div添加overflow: hidden，强制容器包裹所有子元素：

.your-div-class {
  background-color: #xxxxxx; /* 替换为你的背景色 */
  overflow: hidden;
}

• 方案2：伪元素清除浮动（无副作用，推荐）
  通过伪元素在容器末尾插入清除浮动的块元素，彻底解决高度塌陷：

.your-div-class::after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}
.your-div-class {
  background-color: #xxxxxx;
  zoom: 1; /* 兼容IE6/7 */
}

• 方案3：现代浏览器专属方案
  使用CSS新增的display: flow-root，专门用于创建包裹浮动的容器，无需额外代码：

.your-div-class {
  background-color: #xxxxxx;
  display: flow-root;
}

为什么clear:both无效？ #

clear:both只能让当前元素不被浮动元素覆盖，但无法让父容器识别浮动子元素的高度，必须通过上述方法让父容器形成BFC（块级格式化上下文），或者用伪元素闭合浮动，才能让背景色铺满整个容器。

内容的提问来源于stack exchange，提问作者Celina Kim