浮動

使元素浮動和絕對定位，都會脫離文件流
使元素浮動：

1. 設定 float 屬性，不為 none。 雖然脫離了文件流但是仍然會佔據位置。
2. 設定 position: absolute;。脫離文件流並且不佔位。

浮動的好處

1. 文字環繞效果
2. 雙飛翼佈局
3. ...

清除浮動

清除浮動的方式有很多，這裡就介紹些我用過比較好的

1. clear:both;

下面是綜合設定，推薦使用，使用方式：<div class="clearfix"></div>

/* 清除浮動 */
.clearfix::before,
.clearfix::after{
  content: "";
  display: block;
  height: 0;
  line-height: 0;
  visibility: hidden;
  clear: both;
}
 

2. overflow: hidden;

設定overflow: hidden;有兩個作用：

1. 溢位隱藏
2. 設定當前元素 為絕緣容器，不受其它元素影響，也不影響其它元素。這裡的影響主要指元素浮動產生的影響。
   也就是說，當一個元素，因為它的兄弟元素浮動（這裡指 float ）而被影響了，可以給這個元素新增overflow: hidden;，使它不受其它元素影響。

誰需要清除浮動

有時候，為了排版需要，一個父級元素裡的所用子元素都脫離了文件流，導致父級元素高度塌陷，此時，就需要給父級元素清除浮動。以保證和父級並級的其它元素不會排版錯亂。