一 、介紹
A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with other elements.
一個塊格式化的內容是網(wǎng)頁的視覺CSS渲染的一部分膀曾。定義了一個塊盒的布局發(fā)生的區(qū)域倦零，其中浮動與其他元素交互使套。
簡要來說就是他會創(chuàng)建一個新的布局區(qū)域，該元素里面的子元素會按照該區(qū)域來進行布局,就算該元素里面的布局亂成一鍋粥，也不會影響外部的元素矿咕。
二在讶、創(chuàng)建一個新的BFC
- float的值不為none煞抬。
- overflow的值為auto,scroll或hidden。
- display的值為table-cell, table-caption, inline-block中的任何一個构哺。
- position的值不為relative和static革答。
三、BFC的一些特性
1曙强、內部的盒會在垂直方向一個接一個排列（可以看作BFC中有一個的常規(guī)流）残拐；
2、處于同一個BFC中的元素相互影響碟嘴，可能會發(fā)生margin collapse溪食；
3、每個元素的margin box的左邊娜扇，與容器塊border box的左邊相接觸(對于從左往右的格式化眠菇，否則相反)。即使存在浮動也是如此袱衷；
4捎废、BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素致燥，反之亦然登疗；
5、計算BFC的高度時，考慮BFC所包含的所有元素辐益，連浮動元素也參與計算断傲；
6、浮動盒區(qū)域不疊加到BFC上智政；
四认罩、BFC一些常用場景
1、清除float帶來的高度坍塌,通常使用 overflow: hidden
2续捂、清除margin重疊, 建立一個新的BFC包裹重疊的元素
3垦垂、清除float帶來的文本環(huán)繞
理解下為什么BFC會改變文本環(huán)繞，
1牙瓢、首先是浮動劫拗，浮動元素會離開正常的文檔流，建立起一個新的BFC矾克，
而它離開后页慷，后面的block元素會無視他的存在，但是inline元素就會挨著他布局胁附，這才是float這個屬性的真正用意酒繁，并非一開始就是用來布局的。
2控妻、 為什么block元素里面的內容還會挨著float元素呢欲逃？原因是。
A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.
中文的意思一個BFC包含創(chuàng)建該上下文元素的所有子元素饼暑，但不包括創(chuàng)建了新BFC的子元素的內部元素稳析。
結合第一點就是，雖然block元素里面的文本和float元素不是在同一層級里面弓叛，但是仍然處于同一個文檔流里面彰居，他們還是會互相影響的，這時候我們BFC就用上場了撰筷。只需要為該block元素建立一個BFC與外面的元素互不相干就可以了陈惰。
4、利用Float 和 BFC實現(xiàn)只適應布局
參考張鑫旭老師
.left { float: left; } .right { display: table-cell; width: 9999px; *display: inline-block; *width: auto; }
