CSS 浮动高度塌陷问题解决

在 copy 别人官网时遇到新闻按照分类进行浮动布局的情况。各个子元素按照 float:left 向左浮动，从左到右排版。但是父元素显示的背景高度塌陷，没有将子元素包含在内。

具体说明和分析参考：CSS中浮动塌陷的解决办法及分析

文中提到三个方法：

• 设置父元素高度
• 设置父元素也浮动
• 父元素内最后一个元素之后增加空元素，清除浮动

第一和第三都比较适合解决问题。了解第三解决方法原理，找到原代码，果然设置了空元素，所以采用第三解决方法：

<style>
.row::before, .row::after {
  content: ' ';
  display: table;
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-order: 1;
  -ms-flex-order: 1;
  order: 1;
}

.news::after {
  clear: both;
}
</style>

.row 为行组件，默认设置前后伪元素，.news 为需要清除浮动的父元素，与 .row 同级。