清除浮動方法解析

 

清除浮動帶來的額外影響

若是對於浮動不熟悉的同窗，能夠看看介紹float的文章。傳送門：CSS float

咱們知道，在一個父元素內若是遇到某個浮動元素，此時父元素的高度會發生塌陷。針對父元素高度塌陷的問題，如今已經有了不少的解決方案。針對每個方案，咱們來進行深度的剖析。

添加空塊級元素

這種方法比較容易，可是要注意的是這個空元素必須是一個塊級元素，不能是行內元素或者是行內塊元素。缺點就是多了一些沒有意義的標籤。代碼以下。

//HTML <div class="content"> <div class="float"> </div> <div class="clearfix"></div> //用於清除浮動的元素必須是塊級元素 </div> //CSS .content {  background:pink; } .clearfix {  clear: both; } .float {  width: 50px;  height: 50px;  float: left;  background: tan; }

之因此可使用clear屬性清除浮動帶來的額外影響，還要回歸clear屬性的本質。

clear屬性規定元素的哪一側不容許其餘浮動元素。

本質：在CSS2.1中，clear屬性會給清除元素（即設置了clear屬性的元素）的上外邊距之上添加清除空間，而元素自己的外邊距並不改變。再說的詳細一些，也就是給元素設置clear:left|right|both時，會使清除元素的上外邊距邊界恰好在該邊上浮動元素的下外邊距邊界之下。

overflow

在父元素中設置overflow:hidden|auto|scroll能夠解決父元素高度塌陷的問題。爲何能夠經過overflow來解決父元素高度塌陷的問題？這裏涉及到了另一個知識點，也就是BFC（塊級格式化上下文），先看解決方法。原理下篇文章分享。

父元素設置: overflow:hidden|auto;

下面是設置overflow前和overflow後的效果圖

:after僞元素

在父元素上增長:after僞元素，能夠解決父元素高度塌陷的問題。

//HTML <div class="content"> <div class="float"> </div> <p>會給覆蓋嗎？</p> </div> //CSS .content { background: tan; &:after {  content: '.';  display: block;  clear: both;  height: 0;  visibility: hidden; } } .float {  width: 100px;  height: 100px;  float: left;  background: olive; }

放到瀏覽器上，父元素高度正常顯示。

要理解僞元素解決父元素高度塌陷的方案，須要知道額外的一些知識。

浮動

• 當某個元素髮生浮動(left || right)時，該元素會脫離普通文檔流。
• 當某個元素髮生浮動，而且DOM後面的元素沒有文本內容時，此時浮動元素會覆蓋掉緊跟其後的元素。
• 當某個元素髮生浮動，而且DOM後面的元素具備文本內容時，此時浮動元素一樣會覆蓋掉緊跟其後的元素，可是文字環繞在float元素周圍顯示，而不是被覆蓋。

什麼意思呢？其實仔細思考仍是挺好理解的。這裏放上一段代碼解釋前三點。

//HTML與上面的相同，將div換成了span，class換成了float-inline。 //CSS .float-inline {  float:left;  width:100px;  height:100px;  background:pink; }

相應的效果以下。

此時，能夠設置寬高說明了內聯元素span的行內框變成了塊框。同時，在浮動元素同級的下一個元素是具備文本內容的，此時文字就會環繞在float元素的周圍。由於浮動元素的存在，父元素高度塌陷了。

僞元素

僞元素，顧名思義是一個在某個元素以後添加內容。

• 僞元素內容的添加必須放在content屬性裏面。
• 僞元素是行內元素，不過能夠經過display改變僞元素的框的類型。

ok，到這裏。咱們就已經掌握了理解:after僞元素清除浮動所須要的知識了。放上解決方案。按順序剖析。

.clearfix: { zoom:1 } //觸發IE的haslayout. .clearfix:after {  content: '.';  display: block;  clear: both;  height: 0;  visibility: hidden; }

• 設置僞元素的內容爲'.'，content的內容放什麼均可以。
• 設置height:0;
• 設置visibility:hidden。這裏是要讓content隱藏掉。
• 設置clear:both。 清除僞元素的兩側都不容許出現浮動。
• 最重要的是設置display屬性爲block，而且只能是block，不能是inline-block。前面也說過，僞元素是行內元素，行內元素是沒法設置寬高的。設置display:block，此時元素能夠設置寬高，將height:0，此時元素不佔據任何高度。若是隻設置了前四個屬性，而沒有改變僞元素的display，將會沒有效果。

這裏介紹了三種清除浮動帶來的額外影響的三種方法，這裏所說的額外影響指的是浮動元素給兄弟元素和父元素帶來的影響。這裏作一個小小的總結：

• 添加空div和:after僞元素的有一個共同的思想：就是使用clear屬性。clear屬性會給清除元素（即設置了clear屬性的元素）的上外邊距之上增長清除空間，而元素自己外邊距並不改變。而且會使清除元素的上外邊距的邊界恰好在浮動元素的下外邊距邊界之下。因此才能達到清除浮動帶來額外影響的效果。
• 父元素使用overflow不爲visible，也就是設置overflow:hidden|auto，此時也能夠達到清除浮動的效果。這裏涉及到BFC的概念，下一篇文章分享。

轉載：http://www.cnblogs.com/Uncle-Keith/