1.父元素浮動

給父元素設置浮動后，子元素的浮動會歸位，不過如果還有父元素，還需要設置。不推薦使用。

2.空標簽設置

在元素末尾插入一個無意義標簽，并且設置css為clear:both;

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

3.設置偽類方式

使用偽類的:after方式，給清除浮動，比較流行使用這個。

<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">
      我是浮動內(nèi)容
    </p>
  </div>

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

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

4.顯示方式屬性

給父元素設置overflow，即可清除里面的浮動

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

BFC屬性

只要觸發(fā)了bfc，就會清除浮動

相關觸發(fā)：

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