CSS 浮动高度塌陷问题解决

2023-09-14T11:49:00

在 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 同级。

当前页面是本站的「Baidu MIP」版。发表评论请点击:完整版 »