為什么要清除浮動

雖然說現(xiàn)在 9102 年了應該不會再有人用 float 了，但是有些老網(wǎng)頁還是會有 float 來布局的。float 帶來的主要問題是高度坍塌。如：

<div class="parent">
  <div class="children"></div>
</div>

在子元素設置了 float 后，父元素的高度就沒了。

.parent {
  border: 1px solid green;
}

.children {
  float: left;
  height: 100px;
  widtH: 100px;
  border: 1px solid red;
}

結(jié)果：

父元素的高度為0

主要的原因是因為設置了 float 之后，子元素就脫離文檔流，也就相當于浮在父元素上了，從二維變到了三維。父元素里面就中空了，高度也為0了，不再是子元素高度。

解決方法一般有兩個。

overflow

最簡單但是會帶有副作用的方法是在父元素上添加一個 overflow:hidden 就可以了。

.parent {
  overflow: hidden;
  border: 1px solid green;
}

.children {
  float: left;
  height: 100px;
  widtH: 100px;
  border: 1px solid red;
}

結(jié)果：

父元素高度回來了

但是如果代碼多了，每個地方都要加這一句很麻煩，而且有可能父元素 oveflow:hidden 和別的樣式?jīng)_突就麻煩了。

clearfix

我們可以使用另一個方法，也是推薦的方法。首先定義一個 .clearfix 的類

 .clearfix::after{
    content: ''; 
    display: block; 
    clear:both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容 */
 }

然后將這個類添加到父元素上就可以了。

<div class="parent clearfix">
  <div class="children"></div>
</div>

這樣的副作用基本是沒有的，而且只需要在父元素上添加 class 類就好了，更方便。