這篇文章的起因是在寫網(wǎng)站的過(guò)程中想用一個(gè)大的div抱住所有的float塊，通過(guò)控制大div的width實(shí)現(xiàn)自適應(yīng)局中的效果(詳細(xì)原因見(jiàn)之前關(guān)于width的文章)匙姜。理想效果類似這樣脂倦，背后的back塊包住了所有的float信息塊：
最初的嘗試以失敗告終番宁，原因顯而易見(jiàn)：float元素會(huì)脫離正常的文檔流，使父元素的正常文檔流中空無(wú)一物赖阻，在沒(méi)有設(shè)置父元素高度的情況下造成父元素back的高度塌陷蝶押。
在解決這一問(wèn)題的過(guò)程中，對(duì)float和BFC有了更近一步的認(rèn)識(shí)政供，下面就簡(jiǎn)單介紹一下播聪。
float布局
提到float朽基，我總是想把它和一種position歸到一起。的確离陶，浮動(dòng)和定位有很多讓人感覺(jué)相似的地方稼虎。但正如雙魚書上所說(shuō)：“浮動(dòng)不完全是定位，不過(guò)招刨，它當(dāng)然也不是正常流布局”霎俩。關(guān)于浮動(dòng)有太多細(xì)碎的知識(shí)點(diǎn)，我在下面選出了自己認(rèn)為比較重要的幾點(diǎn)作簡(jiǎn)要介紹：
- 浮動(dòng)元素的包含塊是其最近的塊級(jí)祖先元素沉眶。
- 浮動(dòng)與定位都可以使元素跳脫出正常的文檔流實(shí)現(xiàn)自由布局打却，但兩者給予的自由程度不同。利用定位我們可以精確設(shè)置元素的具體位置谎倔。而在浮動(dòng)中我們只能借助瀏覽器幫助我們安放元素柳击，而安放的具體依據(jù)是一系列關(guān)于元素左、上片习、右邊界的具體限制捌肴，具體內(nèi)容可參考雙魚書第十章。
在后來(lái)的操作過(guò)程中發(fā)現(xiàn)藕咏，其實(shí)并不需要讓back包裹住所有float信息塊状知，就算back高度為0，也能讓所有float信息塊實(shí)現(xiàn)局中孽查，具體效果如下：
原因我想在于關(guān)于float元素左饥悴、右邊界的兩條限制：
- 左浮動(dòng)元素的左外邊界不能超出其包含塊的左內(nèi)邊界。
- 左浮動(dòng)元素的右外邊界不能超出其包含塊的右內(nèi)邊界盲再。
overflow:hidden 與 BFC
雖然在局中這里沒(méi)有太大的必要西设，但如何才能讓一個(gè)大的div包含住所有的float元素呢？百度了一下答朋，很多都提到了這樣一個(gè)方法：
overflow:hidden
嘗試了一下济榨，這個(gè)方法確實(shí)能成功，但感覺(jué)很多人并沒(méi)有說(shuō)清楚這個(gè)為什么有用绿映。這里講一下自己粗淺的理解擒滑。
首先要明確的是，設(shè)置overflow屬性的初衷并不是為了解決與float相關(guān)的這些奇奇怪怪的問(wèn)題的叉弦。overflow的目的只是為了設(shè)置元素內(nèi)容對(duì)于元素大小來(lái)說(shuō)過(guò)大丐一，溢出元素本身時(shí)的處理方式。之所以這里設(shè)置overflow:hidden能解決問(wèn)題淹冰，只是因?yàn)檫@恰好觸發(fā)了在設(shè)置overflow:hidden時(shí)元素自帶的BFC機(jī)制库车，而這一機(jī)制幫助我們解決了包裹float元素這一問(wèn)題。
BFC只是一套渲染規(guī)則樱拴，它決定了元素的子元素將如何定位柠衍，以及其和其他元素的關(guān)系和相互作用洋满。很多時(shí)候我們都用到了BFC，只不過(guò)我們不知道而已珍坊。常見(jiàn)的如：
position:absolute
position:fixed
BFC規(guī)則最明顯的特征在于它是一個(gè)獨(dú)立的渲染區(qū)域牺勾。獨(dú)立意味著，與外界相隔離阵漏。一旦元素創(chuàng)建了一個(gè)BFC驻民，它其中的所有元素都會(huì)被它包裹，同樣履怯，容器里面的子元素不會(huì)影響到外面的元素(注意是在渲染的層面上)回还。
正因問(wèn)BFC的這一特性，使其巧妙地解決了包裹float元素這一問(wèn)題叹洲。同時(shí)柠硕，根據(jù)CSS外邊距疊加的規(guī)則，BFC也可以用以阻擋外邊距疊加运提。
