什么要清除浮動？

一開始css的浮動，其本質是用來做一些文字混排效果的，但是后來被我們拿來做布局用，就出現了很多問題。

清除浮動的本質： 為解決父級元素因為子級浮動引起高度為0的問題

我們很多時候不方便給父盒子的高度，因為我們不清除有多少子盒子，有多少內容。經常的做法會讓內容撐開父盒子的高度。 但是如果父盒子中有子盒子浮動了之后，就會影響到后面的盒子，因為浮動元素脫離了標準流。會把后面還在標準流的盒子覆蓋，解決這個問題的方法就要清除浮動

原理圖

如何清除浮動？

清除浮動其實叫做 閉合浮動 更合適，因為是把浮動的元素圈起來，讓父元素閉合出口和入口不讓他們出來影響其他的元素。 在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器 { clear : 屬性值 ; }
/*屬性值為left,清除左側浮動的影響
  屬性值為right,清除右側浮動的影響
  屬性值為both,同時清除左右兩側浮動的影響*/
復制代碼

1. 額外標簽法

1.1 末尾標簽法

通過在浮動元素的末尾添加一個空的標簽。這是W3C推薦的做法，雖然比較簡單，但是添加了無意義的標簽，結構化比較差，所以不推薦使用。下面三種寫法都適用：

<!--寫法一：直接用style-->
<div style="clear:both"></div>

<!--寫法二：使用clear類-->
<style>
.clear { clear:both }
</style>
<div class="clear"></div>

<!--寫法三：可以使用br等別的塊級元素來清除浮動-->
<style>
.clear { clear:both }
</style>
<br class="clear" />

1.2 內部標簽法

把div放進父盒子里，這樣盒子會撐開，一般也不會用。

2. overflow

給父級元素添加overflow樣式方法。

這種方法代碼比較簡潔，可以通過觸發BFC方式，但是因為本身overflow的本質是 溢出隱藏 的效果，所以有的時候也會有一些問題存在，比如內容增多的時候不會自動換行導致內容被隱藏掉，無法顯示出要溢出的元素。

.father {
      overflow: auto;  
    /* 加上這句話，就可以清除浮動   overflow = hidden|auto|scroll 都可以實現*/
  }
復制代碼

3. 偽元素法（最常用）

3.1 使用after偽元素清除浮動

after是在父元素中加一個盒子，這個元素是通過css添加上去的，符合閉合浮動思想，結構語義化正確。 父元素中加一個類名為clearfix 。但是這個方法IE6-IE7不識別，要進行兼容，使用zoom:1觸發hasLayout來清除浮動

代表網站：百度、淘寶、網易等

.clearfix:after{
    content:".";  /*盡量不要為空，一般寫一個點*/
    height:0;     /*盒子高度為0，看不見*/
    display:block;    /*插入偽元素是行內元素，要轉化為塊級元素*/
    visibility:hidden;      /*content有內容，將元素隱藏*/
    clear:both;  
}

.clearfix {
    *zoom: 1;   /*  *只有IE6,7識別 */
}
復制代碼

3.2 after偽元素空余字符法

父元素中加一個類名為clearfix，也需要兼容IE6-IE7

在Unicode字符里有一個“零寬度空格”，即U+200B，代替“.”，可以減少代碼量，不再使用visibility:hidden

代表網站：阿里巴巴

.clearfix::after{
    content:"\200B";   /* content:'\0200'; 也可以 */
    display:block;
    height:0;
    clear:both;
}

.clearfix {
    *zoom: 1; 
}
復制代碼

3.3 使用before和after雙偽元素清除浮動（推薦）

這種方法完全符合閉合浮動思想。給父元素加一個類名為clearfix,需要兼容IE6-IE7

代表網站：小米、騰訊

 .clearfix:before, .clearfix:after {
        content: ""; 
        display: table;
    }
    .clearfix:after {
        clear: both;
    }
    .clearfix {
        *zoom: 1;
    }
復制代碼

三種方法總結

?copyright burning.

最后在這里說一下，目前在職web前端開發，如果你現在在學習web前端，在整個前端入門的學習過程當中，有遇見任何關于學習方法，學習路線，學習效率等方面的問題，或者缺乏基礎入門的視頻教程，前端面試題，學習手冊，開發工具，PDF文檔書籍教程，都可以隨時關注并私信我：前端 ，系統自動堅持會發送交流圈子，可以來自行獲取下載。

作者：頑皮的雪狐七七
鏈接：https://juejin.cn/post/6901903789197197325
來源：掘金

. 前言

CSS世界中的float屬性是一個年代非常久遠的屬性。雖然最初創造浮動并不是為了用于頁面布局，但它在布局方面表現得很出色。然而為了理解浮動，我們首先必須牢記它的設計初衷。Web誕生之初，帶寬就那么一點點，我們能夠做到的也只是展示文字以及零星圖片而已，怎么可能浮動設計的目的就是為了實現各種磚頭式的復雜布局呢？那個年代復雜布局都是用<table>實現的。既然這樣，那float屬性設計的目的究竟是什么呢？

2 浮動的本質

很簡單，一句話：浮動的本質就是為了實現文字環繞效果。而這種文字環繞，主要指的就是文字環繞圖片顯示的效果。所以，大家應該也多少對為什么老IE瀏覽器與浮動相關的bug一火車都裝不下有些了解了吧！人家的功能本來就很單純，只是讓文字可以繞著圖片跑，你偏要各種布局，結果撐不住了吧！

所以說：浮動是魔鬼，少砌磚頭、少浮動，要更多地去挖掘CSS世界本身的“流動性”和“自適應性”，以構建能夠適用于各種環境的高質量的網頁布局。好的網頁應該如同好的建筑。傳統的樓房是典型的“剛”式結構，磚頭加樓板，問題不言而喻，一個小小的地震可能就被夷為平地；而好的樓房應該是有“柔”在其中，也就是高質量的鋼筋結構，當地震導致房屋搖晃的時候，可以通過鋼筋的“柔性”卸力而保障整體結構的穩固。臺風襲來，很少見到說柔弱的柳樹被吹倒，反而會經常看到堅固的電線桿被風吹倒的消息，道理其實也類似。

3 浮動的特性

浮動有三個關鍵字可以選擇，left為向左浮動，right為向右浮動，none為不浮動。無論是行內元素（inline）還是塊級元素（block），設置浮動后都會變成塊級元素。但表現得卻更像行內塊元素（inline-block），因為在沒有明確寬度的時候，寬度會隨著內容自適應，而不是占據一行。

過去，浮動的行為經常受到瀏覽器bug的干擾，特別是在IE6和IE7中。幸虧這些瀏覽器幾乎已經淡出市場了，我們不必再擔心那些bug了。現在我們可以保證各種瀏覽器對浮動的處理是一致的。但是浮動仍有一些行為會讓你措手不及。這些并不是bug，而是因為浮動嚴格遵循了標準。讓我們來看看浮動如何工作，以及怎樣調整浮動的行為來實現理想的布局。

float都有哪些有意思的特性呢？具體如下：

• 包裹性

所謂“包裹性”，由“包裹”和“自適應性”兩部分組成。包裹假設浮動元素父元素寬度180px，浮動元素子元素是一個120px寬度的圖片，則此時浮動元素寬度表現為“包裹”，就是里面圖片的寬度120px，代碼如下：

.div { width: 180px; }
.float { float: left; }
.float img { width: 120px; }
<div class="div"> 　
    <div class="float">　　
        <img src="float.jpg">　 
    </div>
</div>

自適應性，如果浮動元素的子元素不只是一張120px寬度的圖片，還有一大波普通的文字，例如：

<div class="father">
    <div class="float">　　 
        <img src="float.jpg">大家好，我是碼農洞見。　
    </div>
</div>

則此時浮動元素寬度就自適應父元素的180px寬度，最終的寬度表現也是180px。

• 塊狀化并格式化上下文

塊狀化的意思是，元素一旦float的屬性值不為none，則其display計算值就是block或者table。

• 破壞文檔流

float通過破壞正常CSS流實現CSS環繞，帶來了煩人的“高度塌陷”的問題，然而，凡事都具有兩面性，只要了解透徹，說不定就可以變廢為寶、化腐朽為神奇。例如。我們可以利用float破壞CSS正常流的特性，實現兩欄或多欄的自適應布局。

4 清除浮動

浮動會影響周圍元素，并且還會引發很多意想不到的問題。在CSS中，我們可以使用clear屬性來清除浮動帶來的影響。clear屬性語法如下：

clear: none | left | right | both

在實際開發中，我們幾乎不會使用“clear:left”或“clear:right”來單獨清除左浮動或右浮動，往往都是直截了當地使用“clear:both”來把所有浮動清除，既簡單又省事。也就是說，我們只需要記住“clear:both”就可以了。

5 總結

通過閱讀本文我們了解到浮動的設計初衷是讓文字圍繞一個元素排列，但有時這種效果并不是我們想要的。使用清除浮動來包含浮動元素。所謂生生相克，既然有破壞，就有保護其他元素不被破壞的屬性。總之，只有深入理解浮動的工作原理，勤加練習才有可能避開常見的陷阱。達到選擇合適的工具來實現想要的效果。

6 最后的最后

為初學者提供學習指南，為從業者提供參考價值。我堅信碼農也具有產生洞見的能力。關注【碼農洞見】，一起學習和交流吧！