(2019)[前端]面試題[2]：清除浮動的方式

• 2019 年 11 月 13 日
• 筆記

Hello，歡迎來到我的博客，每天一道面試題，我們共同進步。

問題

清除浮動的方式

前提

什麼是浮動

我們首先得明白什麼是浮動：在較早的時候，那時候布局是沒有現在的flex之流的。那個時候比較流行的是浮動布局：float。但是用了之後，是可以解決一些布局問題，但又帶來了其他問題了。

普通情況下父元素高度由子元素高度決定：

.parent {      width: 50vw;      padding: 5px;      border: 10px solid #000;  }    .child {      width: 100%;      height: 100px;      background-color: red;  }

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

但是如果子元素浮動後呢？

很明顯，高度塌陷了，這是浮動後我們最需要解決的一個問題。

有趣的概念

網上有人提出了兩個名詞：清除浮動和 閉合浮動

清除浮動：清除在樣式中添加：clear:both,left,right 這也叫清除浮動。

閉合浮動：增加浮動後，使浮動元素閉合，從而減少浮動帶來的影響。

為什麼要清除浮動

很簡單，浮動雖然滿足了我們的一些布局要求，但是，也遺留了很多問題。比如：高度塌陷問題。

解決

清除浮動很多辦法，但是我們要找一個最好的辦法。面試的時候，肯定也會問最好的辦法。

最好的辦法

利用偽元素清除

接着之前的案例，我們給父元素增加一個after偽類：

.parent::after {      clear: both;      content: '';      display: block;      height: 0;      visibility: hidden;  }

注意： 1、以上基本是業界固定的寫法，網上說如果非要兼容IE6-7，添上room:1;個人覺得沒有必要。 2、必須要父元素身上加，才有用。

此方法優點：

1、不會產生額外元素 2、不影響其他布局，方便以後修改。

額外添加元素

我們額外定義一個類：

.clear {      clear: both;  }

在浮動元素後，新增一個元素並添加此類：

<div class="parent">      <div class="child"></div>      <div class="clear"></div>  </div>

一樣的效果

缺點：

1、增加了額外元素，不方便後期代碼維護。

利用BFC清除

此處不再贅述，可參考前一天發的文章：https://www.misiyu.cn/article/96.html#%E5%88%A9%E7%94%A8BFC%E6%B8%85%E9%99%A4%E6%B5%AE%E5%8A%A8

總結

其實還有很多方法，但是最簡單就是這兩種，也最常用。

若想參考其他解決方法，請參考：https://blog.csdn.net/mrfang1413/article/details/80386203

http://www.sohu.com/a/237178445_608275