什么時(shí)候要清除浮動(dòng)
其實(shí)浮動(dòng)float最開(kāi)始出現(xiàn)的意義只是為了讓文字環(huán)繞圖片而已张惹。但人們發(fā)現(xiàn)，如果想要三個(gè)塊級(jí)元素并排顯示坎匿，都給它們加個(gè)float來(lái)得會(huì)比較方便雷激。但這樣做也會(huì)帶來(lái)問(wèn)題......
我們希望看到這樣的效果：
但結(jié)果卻是這樣：
這個(gè)時(shí)候，我們就要清除浮動(dòng)帶來(lái)的影響——父元素高度塌陷了承桥。
這里引用張?chǎng)涡翊笊?a target="_blank" rel="nofollow">觀點(diǎn)：
撇開(kāi)浮動(dòng)的“破壞性”根悼，浮動(dòng)就是個(gè)帶有方位的display:inline-block屬性。
一目了然：如果我們給上面的三個(gè)綠顏色的方塊設(shè)置display:inline-block也能達(dá)到讓它們并排顯示的效果挤巡。并且父元素的高度也不會(huì)塌陷。只不過(guò)無(wú)法控制是居左還是居右襟衰，display:inline-block只能從左往右粪摘。
來(lái)看看我們?nèi)绾吻宄?dòng)
我們說(shuō)的清除浮動(dòng)是指清除由于子元素浮動(dòng)帶來(lái)父元素高度塌陷的影響。
為父元素設(shè)置高度
為父元素定高徘意，簡(jiǎn)單粗暴，壞處不用多說(shuō)吧椎咧，沒(méi)有人會(huì)這么干的..._在父元素的最后設(shè)置
clear:both
<div class="p">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div style="clear:left;"></div> <!--冗余的子元素-->
</div>
當(dāng)添加了最后一個(gè)冗余元素（未設(shè)置clear:both）時(shí)把介；父元素和此冗余元素的高度都為0蟋座，并且三個(gè)浮動(dòng)的元素都浮在了它們的上方蓋住了它們（可以把它們看成PS中的圖層）。現(xiàn)在巢墅，給這個(gè)冗余元素添加clear:both（clear屬性介紹）券膀，它便要躲開(kāi)這三個(gè)浮動(dòng)元素，因此芹彬，一直往下跑，直到?jīng)]有被浮動(dòng)元素蓋住才停下來(lái)会喝。而父元素看到這個(gè)子元素跑開(kāi)了会前，自然想要包裹住它好乐。
這樣就能看到我們想要的結(jié)果了——父元素高度被撐開(kāi)了。
貌似不錯(cuò)岭妖，不過(guò)似乎有點(diǎn)問(wèn)題——我們有必要在頁(yè)面中添加這么多沒(méi)有意義的冗余元素嗎？顯然這樣太麻煩假夺，而且不符合語(yǔ)義化斋攀。
還好有偽元素，這里我們使用
::after淳蔼。添加一個(gè)類(lèi)fix：
.fix::after {
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
在我們需要清除浮動(dòng)時(shí)，只需要給父元素追加fix類(lèi)就能達(dá)到清除浮動(dòng)的效果讳癌，既方便又符合語(yǔ)義化存皂。
<div class="p fix">
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</div>
當(dāng)然，大神的fix類(lèi)這么寫(xiě)：
.fix::after {
content:"";
display:table;
clear:both;
}
大師手筆，看起來(lái)更清爽了......
- 給父元素添加
overflow:hidden
這里有必要了解一下BFC塊級(jí)格式化上下文它改，只說(shuō)結(jié)論：
創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子商乎，不過(guò)只有Block-level box可以參與創(chuàng)建BFC， 它規(guī)定了內(nèi)部的Block-level Box如何布局截亦，并且與這個(gè)獨(dú)立盒子里的布局不受外部影響，當(dāng)然它也不會(huì)影響到外面的元素崩瓤。它具有以下特征：
- 內(nèi)部的Box會(huì)在垂直方向，從頂部開(kāi)始一個(gè)接一個(gè)地放置境输。
- Box垂直方向的距離由margin決定颖系。屬于同一個(gè)BFC的兩個(gè)相鄰Box的margin會(huì)發(fā)生疊加。
- 每個(gè)元素的margin box的左邊嘁扼， 與包含塊border box的左邊相接觸(對(duì)于從左往右的格式化，否則相反)趁啸。即使存在浮動(dòng)也是如此。
- BFC的區(qū)域不會(huì)與float box疊加旅掂。
- BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器访娶，容器里面的子元素不會(huì)影響到外面的元素，反之亦然崖疤。
- 計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算鲫尊。
看到第六條沦偎，如獲至寶疫向。只需給父元素創(chuàng)建塊級(jí)格式化上下文，就可以讓浮動(dòng)的元素參與高度計(jì)算谈火，這樣一來(lái)舌涨，父元素的高度就有了糯耍。
不單單只有給父元素添加overflow:hidden才可以創(chuàng)建塊級(jí)格式化上下文囊嘉，下列方法都可以：
- 浮動(dòng) (元素的
float不為none） - 絕對(duì)定位元素 (元素的
position為absolute或fixed) - 行內(nèi)塊 inline-blocks (元素的
display: inline-block) - 表格單元格 (元素的
display: table-cell，HTML表格單元格默認(rèn)屬性) - 表格標(biāo)題 (元素的
display: table-caption舵鳞，HTML表格標(biāo)題默認(rèn)屬性) -
overflow的值不為 visible的元素 - 彈性盒子 flex boxes (元素的
display: flex或inline-flex)
用overflow:hidden較多的原因是不會(huì)帶來(lái)其它的布局問(wèn)題琢蛤。
題外話(huà)：其實(shí)用塊級(jí)上下文解釋清除浮動(dòng)個(gè)人感覺(jué)牽強(qiáng)，但也解釋的過(guò)去哈博其。開(kāi)拓下思維，看下知乎的問(wèn)題CSS中為什么overflow:hidden能清除浮動(dòng)(float)的影響背伴？原理是什么峰髓？，或許能找到你想要的儿普。
