浅谈CSS中浮动float带来的高度塌陷问题及4种解决方案

什么是高度塌陷问题？

当一个元素浮动之后，它会被移出正常的文档流，不再占据空间，但是它的父元素在没有触发BFC（块级格式化上下文）条件下的情况下，又不会自动容纳子元素的高度，导致父元素高度塌陷。

高度塌陷的例子

<div class="box">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div class="clear-fix"></div>
</div>

.box {
width: 300px;
border: 1px solid #ccc;
}

.float-left {
width: 100px;
height: 100px;
background-color: red;
float: left;
margin-right: 10px;
}

.clear-fix {
clear: both;
}

在上面的例子中，.box的高度不会自动容纳浮动的两个子元素的高度，所以.box的高度塌陷了。

解决方案

1. 使用clear属性

在浮动元素的下方加入一个带有clear属性的元素，它会清除其前面浮动元素所带来的影响，使得父元素能够自动容纳高度。

<div class="box">
  <div class="float-left"></div>
  <div class="float-left"></div>
  <div style="clear: both;"></div>
</div>

2. 父元素添加overflow属性

给父元素添加overflow属性，使其成为BFC，就能够自动容纳其子元素的高度。

.box {
  width: 300px;
  border: 1px solid #ccc;
  overflow: hidden;
}

3. 使用display: table

使用display:table属性可以让父元素像一个table一样，自动容纳子元素的高度。

<div class="table-wrapper">
  <div class="table-cell"></div>
  <div class="table-cell"></div>
</div> 

.table-wrapper {
  display: table;
  width: 300px;
  border: 1px solid #ccc;
}

.table-cell {
  display: table-cell;
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
}

4. 使用CSS3 Flexbox布局

使用CSS3 Flexbox布局可以轻松解决高度塌陷问题。

<div class="flex-box">
  <div class="flex-item"></div>
  <div class="flex-item"></div>
</div>

.flex-box {
  display: flex;
  width: 300px;
  border: 1px solid #ccc;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: red;
  margin-right: 10px;
}

以上是四种解决高度塌陷问题的方案，在实际项目中推荐使用第一种或第二种方案，因为它们的浏览器兼容性最好。