關於清除浮動的問題

首先咱們要明確一個問題，一個元素浮動後就脫離了文檔流。那麼什麼是脫離文檔流呢？脫離文檔流就是這個元素已經不佔據頁面的空間了，下面我舉一個例子來講明。

demo1:

運行結果以下：

能夠看到box的高度已經徹底由浮動元素fd撐開了高度也是400px;box的寬度繼承它父級也就是body的寬度100%，因此會出現如圖所示的黑色區域。可是我要是給fd一個浮動的話，讓咱們再來看看會有什麼結果。

關鍵代碼：（其他部分不發生改變）

運行結果是；

如今已經徹底看不到黑色的區域了，也就是如今的box高度爲0；這也就是我上面所說的浮動元素脫離了文檔流，它的父級已經不能由fd撐開了，那麼咱們該怎麼辦才能讓box有具體的高度呢？這裏介紹四種方法。

方法1:給box加上overflow:hidden;

運行結果：

方法2：給box一個具體的高度

運行結果：

3.給fd增長一個兄弟元素，並在兄弟元素樣式上增長clear:both;

運行結果：

 4.用僞類來解決

運行結果：

你們明白了嗎？