清除浮动的几种方法

清除浮动的目的： 解决高度塌陷。

方法

1. clear: both 1.0

<style>
  .clear-fix {
    clear: both;
  }
  .item {
    float: left;
    width: 100px;
    height: 100px;
    background-color: #7fffd4;
  }
</style>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clear-fix"></div>
  </div>

2. clear: both 2.0

<style>
  .box:after {
    content: ' ';
    display: block;
    clear: both;
  }
  .item {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #7fffd4;
  }
</style>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

注意只能使用:after添加clear:both, 因为只有在所有浮动的元素的最后面添加clear:both才是有意义的。

3. overflow

<style>
  .box {
    overflow: hidden;
  }
  .item {
    float: left;
    width: 100px;
    height: 100px;
    margin: 10px;
    background-color: #7fffd4;
  }
</style>
<div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

原因：overflow： hidden会重新创建一个BFC这样就解决了高度塌陷的问题。

图片.png