清除浮動方法解析

清除浮動帶來的額外影響

如果對于浮動不熟悉的同學，可以看看介紹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/p/6082667.html

總結

以上是生活随笔為你收集整理的清除浮动方法解析的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。