仅用CSS Float实现响应式列时，section背景色无法生效的问题

当子元素设置float后，会脱离正常文档流，导致父容器无法感知子元素的高度，最终父容器高度塌陷（高度为0），所以你设置的背景色自然看不到。下面提供几种无需给列单独加背景色，就能让父容器正常显示背景色的方案：

方案一：用clearfix类清除浮动 #

这是处理浮动塌陷的经典方案，通过伪元素清除父容器内的浮动，让父容器包裹住子元素：

/*设置背景色为红色的section*/
.section {
  width: 100%;
  background-color: red;
}

/* 清除浮动的clearfix类 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/*宽度50%的列*/
.column {
  width: 50%;
  float: left;
}

/*响应式断点800px的媒体查询*/
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
}

对应的HTML只需给外层容器加上clearfix类：

<div class="section clearfix">
  <div class="column">
    <h1>Column 1</h1>
    <p>This is Column 1 with 50% width and float left.</p>
  </div>
  <div class="column">
    <h1>Column 2</h1>
    <p>This is Column 2 with 50% width and float left.</p>
  </div>
</div>

方案二：给父容器设置overflow属性 #

通过给父容器添加overflow: auto或overflow: hidden触发BFC（块级格式化上下文），强制父容器包裹住浮动元素：

/*设置背景色为红色的section*/
.section {
  width: 100%;
  background-color: red;
  overflow: auto; /* 也可使用overflow: hidden */
}

/*宽度50%的列*/
.column {
  width: 50%;
  float: left;
}

/*响应式断点800px的媒体查询*/
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
}

HTML无需修改，保持原有结构即可。

方案三：使用display: flow-root（现代浏览器推荐） #

这是CSS3新增的属性，专门用于创建BFC，写法简洁且无副作用：

/*设置背景色为红色的section*/
.section {
  width: 100%;
  background-color: red;
  display: flow-root;
}

/*宽度50%的列*/
.column {
  width: 50%;
  float: left;
}

/*响应式断点800px的媒体查询*/
@media screen and (max-width: 800px) {
  .column {
    width: 100%;
  }
}

HTML同样不需要修改。

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