清除浮動的幾種方法

Css對於浮動的定義：使元素脫離了文檔流，按照指定方向移動，直到碰到包含框或另外一個浮動框爲止。

本人如今雖然已經不用浮動了，都用彈性佈局flex，可是不能否認，浮動是在彈性佈局出現以前使用最多的。而清除浮動有哪些方法，哪些方法又是推薦的。

一、overflow: hidden

子元素浮動了，那麼給父元素設置屬性overflow: hidden，浮動就清除了，這個方法惟一的缺點就是超出父元素的會被隱藏。

二、增長額外標籤，而後添加屬性clear: both

在這個使用了浮動以後增長一個標籤，這個標籤添加屬性clear: both，並且這個標籤還須要是塊或者是行標籤，span和a等標籤也無效。這種方法會給頁面增長不少無用的標籤，可是若是你一個div以後又是一個div，而後內容是寫在下一個div裏面，那麼給這個div添加仍是可行的。

三、給父元素添加高度

咱們都知道浮動以後形成了高度塌陷，那麼咱們只要給父元素添加了高度，就能夠解決浮動問題。缺點也很明顯，那就是父元素高度必須固定了。

四、給全部元素添加浮動

浮動的元素碰到另外一個浮動的元素就會中止，那麼給全部元素添加浮動也能夠解決問題。可是這方法實在是太弱智了，通常不會有人用吧。

五、使用display: inline-block

給父元素設置這個屬性，浮動能夠解決，惟一缺點就是margin: 0 auto失效了。

六、使用

由於br自帶clear屬性，因此使用它能夠解決浮動。這跟添加空標籤同樣，多了不少無用標籤，也不推薦。

七、after僞類清除

這是最推薦的方法了，若是有用過bootstrap的能夠看一下他們也是使用的clearfix類就是用的這個方法。注意此方法IE六、IE7下不兼容。

八、設置overflow: auto

這個跟設置hidden差很少，缺點就是不能自定義高度了。

九、設置display: table

我是以爲跟flex有點相似了，不推薦使用，由於不知道會不會有其餘問題。

歡迎關注Coding我的筆記 公衆號