好程序員web前端學(xué)習(xí)路線(xiàn)分享CSS浮動(dòng)-清除浮動(dòng)篇

好程序員web前端學(xué)習(xí)路線(xiàn)分享CSS浮動(dòng)-清除浮動(dòng)篇，為什么要清除浮動(dòng)

　　這里所說(shuō)的清除浮動(dòng)，并不是不要浮動(dòng)了，而是清除浮動(dòng)與浮動(dòng)之間的影響。那么到底會(huì)有什么影響呢？

1． 高度塌陷

　　舉個(gè)例子我們看一下。

　　我們?cè)谶@里設(shè)置了div0 是外容器， div1 是內(nèi)部容器， div1 因?yàn)樵O(shè)置了寬高是 100 ，所以顯示的時(shí)候就是一個(gè)橙色的 100*100 的方塊，但是 div0 僅設(shè)置了背景色，因?yàn)?/span> div 特有的獨(dú)占一行，寬度會(huì)自動(dòng) 100% ，高度被內(nèi)部容器 div1 撐開(kāi)了，撐開(kāi)的高度是 100 像素，所有看到一個(gè)綠色高 100 像素，寬度 100% 的容器

　　現(xiàn)在我們給div1 設(shè)置浮動(dòng)

　　這時(shí)候我們發(fā)現(xiàn)div0 這個(gè)外容器沒(méi)了，看不見(jiàn)了。。別急，我們?cè)?/span> div0 里打一些字看看

　　我們發(fā)現(xiàn)aaa 這些文字出來(lái)了，環(huán)繞在橙色方塊周?chē)?，這個(gè)原因在浮動(dòng)中我們已經(jīng)講解了，而且我們也發(fā)現(xiàn)綠色的容器也出來(lái)了，但是它的高度僅僅是文字的行高。這就說(shuō)明，內(nèi)部的橙色塊設(shè)置浮動(dòng)后，它的父級(jí)容器綠色塊就不知道橙色容器的高度了，因此綠色容器的高度變成了 0 ，寫(xiě)入文字后，綠色容器重新被撐開(kāi)高度才可以看到。我們把這種情況稱(chēng)為 高度塌陷。

　　我們其實(shí)是希望一個(gè)容器中的內(nèi)容不斷的撐開(kāi)容器的高度，這樣我們后續(xù)的內(nèi)容就可以緊貼在上面了，而網(wǎng)頁(yè)中的內(nèi)容并不是都是靜態(tài)的，很多都需要每天更新，更新的內(nèi)容多少，圖片高度，都不相同。那么后面的東西想要緊貼上面的內(nèi)容，上面內(nèi)容的高度就不能設(shè)置一個(gè)固定數(shù)值，否則很多數(shù)據(jù)的時(shí)候放不下。如果不設(shè)置高度，一旦設(shè)置浮動(dòng)后，就會(huì)出現(xiàn)高度塌陷。丟失了高度后，頁(yè)面后續(xù)的內(nèi)容就會(huì)插在上面內(nèi)容的底部，頁(yè)面就會(huì)錯(cuò)亂，因此我們就需要做清除浮動(dòng)來(lái)解決這個(gè)問(wèn)題，最終做到即使使用浮動(dòng)，外容器也會(huì)因?yàn)閮?nèi)容的多少自動(dòng)撐開(kāi)高度，不會(huì)高度塌陷。

margin padding設(shè)置值不能正確顯示

2． Margin 和 padding 屬性值不正確

　　 由于浮動(dòng)導(dǎo)致父級(jí)子級(jí)之間設(shè)置了css padding 、 css margin 屬性的值不能正確表達(dá)。特別是上下邊的 padding 和 margin 不能正確顯示。

　　要來(lái)解決這個(gè)問(wèn)題，我們就必須來(lái)認(rèn)識(shí)一下BFC

什么是BFC

　　要來(lái)理解BFC ，先介紹一下 Box 和 Formatting Context

Box  是  CSS  布局的對(duì)象和基本單位，  簡(jiǎn)單來(lái)說(shuō)頁(yè)面就是由Box 組成， 元素的類(lèi)型和 display  屬性，決定了這個(gè)  Box  的類(lèi)型。 不同類(lèi)型的  Box ， 會(huì)參與不同的  Formatting Context （一個(gè)決定如何渲染文檔的容器），因此 Box 內(nèi)的元素會(huì)以不同的方式渲染。

1 、block-level box:display  屬性為  block, list-item, table  的元素，會(huì)生成  block-level box 。并且參與  block formatting context ；

2 、inline-level box:display  屬性為  inline, inline-block, inline-table  的元素，會(huì)生成  inline-level box 。并且參與  inline formatting context ；

3 、run-in box: css3  中才有， 這兒先不講了。

　　Formatting context  是  W3C CSS2.1  規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域，并且有一套渲染規(guī)則，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用。最常見(jiàn)的  Formatting context  有  Block fomatting context ( 簡(jiǎn)稱(chēng) BFC) 和  Inline formatting context ( 簡(jiǎn)稱(chēng) IFC) 。

　　BFC(Block formatting context) 直譯為 " 塊級(jí)格式化上下文 " 。它是一個(gè)獨(dú)立的渲染區(qū)域，只有 Block-level box 參與， 它規(guī)定了內(nèi)部的 Block-level Box 如何布局，并且與這個(gè)區(qū)域外部毫不相干。

BFC 布局規(guī)則：

（1） 內(nèi)部的Box 會(huì)在垂直方向，一個(gè)接一個(gè)地放置。

（2）Box 垂直方向的距離由 margin 決定。屬于同一個(gè) BFC 的兩個(gè)相鄰 Box 的 margin 會(huì)發(fā)生重疊

（3） 每個(gè)元素的margin box 的左邊， 與包含塊 border box 的左邊相接觸 ( 對(duì)于從左往右的格式化，否則相反 ) 。即使存在浮動(dòng)也是如此。

（4）BFC 的區(qū)域不會(huì)與 float box 重疊。

（5）BFC 就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此。

（6） 計(jì)算BFC 的高度時(shí)，浮動(dòng)元素也參與計(jì)算

瞧，最后一條就是我們需要利用的了，我們只需要利用BFC 就可以解決浮動(dòng)后外容器高度塌陷的問(wèn)題

如何生成BFC

1. 根元素 是BFC 模式

　　這種不能考慮，因?yàn)槎疾皇歉?/p>

1. 設(shè)置高度

　　顯然也是不可以的。

1. float 屬性不為 none

　　本來(lái)就要設(shè)置浮動(dòng)的。所以也不考慮

1. position 為 absolute 或 fixed

　　這樣設(shè)置后，就失去浮動(dòng)的意義了。因此也不使用

1. display 為 inline-block, table-cell, table-caption, flex, inline-flex

　　雖然可以開(kāi)啟，但是導(dǎo)致父元素原有寬度丟失

1. overflow 不為 visible

這種方法副作用比較小，但是還是有問(wèn)題的。比如overflow 設(shè)置為 hidden ，這個(gè)不行，內(nèi)容的高度是撐開(kāi)的寬度也不能確定。設(shè)置為 scroll ，會(huì)出現(xiàn)右邊和下邊的滾動(dòng)條寬度

設(shè)置為auto 最合適，不過(guò)，如果里面的內(nèi)容使用了定位，并且超出去就會(huì)出現(xiàn)滾動(dòng)條。所以只能保證內(nèi)容不能有定位。

Clear:both

　　清除：兩者間，顧名思義就是清除浮動(dòng)

　　我們看到如果要使用clear:both ，就需要給高度塌陷的容器里面最后追加一個(gè) div ，并且給這個(gè) div 設(shè)置為 clear ： both ，我們發(fā)現(xiàn)這種使用方法比較麻煩，每次設(shè)置都需要最后增加 div 。

　　因此我們做了一個(gè)修改