1.父元素浮動(dòng)

給父元素設(shè)置浮動(dòng)后，子元素的浮動(dòng)會(huì)歸位，不過(guò)如果還有父元素，還需要設(shè)置。不推薦使用。

2.空標(biāo)簽設(shè)置

在元素末尾插入一個(gè)無(wú)意義標(biāo)簽，并且設(shè)置css為clear:both;

<div style="background: #000;">
  <p style="float: left;color:#fff">
    我是浮動(dòng)內(nèi)容
  </p>
  <div style="clear: both;"></div>
</div>

3.設(shè)置偽類方式

使用偽類的:after方式，給清除浮動(dòng)，比較流行使用這個(gè)。

<style type="text/css">
    .clearfix:after{
      content: '.';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  </style>
  <div style="background: #000;" class="clearfix">
    <p style="float: left;color:#fff">
      我是浮動(dòng)內(nèi)容
    </p>
  </div>

上面的css可以進(jìn)一步優(yōu)化

.clearfix:after{
  content: '';
  display: table;
  clear: both;
}

4.顯示方式屬性

給父元素設(shè)置overflow，即可清除里面的浮動(dòng)

<div style="background: #000;overflow: auto;">
  <p style="float: left;color:#fff">
    我是浮動(dòng)內(nèi)容
  </p>
</div>

BFC屬性

只要觸發(fā)了bfc，就會(huì)清除浮動(dòng)

相關(guān)觸發(fā)：

overflow: auto;
overflow: hidden;
display: inline-block;
display: table-cell;
display: table-caption;
position: absolute;
position: fixed;
float: left;
float: right;