關於塊級格式化上下文(Block formatting context)

時間 2019-12-14

標籤關於格式化上下文 block formatting context 简体版

原文原文鏈接

不是誰都像你同樣只向着前方就能活下去了，你就拋棄那些沒用的同伴前行就行了，你註定是要成爲海賊王的男人吧，而我就算沒有遠大的目標也能夠。——《one piece》

Block formatting contex t(如下簡寫爲BFC)又稱作塊級格式化上下文，源自CSS2.1 規範中的Visual formatting model，Visual fomatting model定義了視覺媒體該怎樣處理文檔內容,BFC屬於Normal flow(正常流)，它與其餘正常流元素並無本質的區別，BFC在CSS3中叫作 flow root 。瞭解怎樣建立BFC，BFC的特性，以及它與其餘屬性 (如 float , clear 和 margin )的相互做用。總而言之，BFC創造了一個的壞境，這個相對獨立的環境，決定了它怎樣影響外部和內部。

一，建立Block formatting context

知足如下任意一個條件，都將建立新的BFC.

浮動元素;
position的值除static和relative之外的值;
display:table-cell元素;
display:table-caption元素;
display:inline-block元素;
元素設置overflow值且不爲"visible"(hidden | scroll | auto)[除非傳播到視窗外];

display:table 自己並不會建立BFC，但由於它能生成匿名框，他們其中之一( display:table-cell )會建立BFC。換句話說，建立BFC的並非 display:table ,而是 display:table-cell。 position:fixed 也會建立BFC，由於 fixed 屬於絕對定位的一個子類。另一個建立BFC的是 fieldset 元素，說來奇怪，在 www.w3.org 沒有此信息。有提到這個是瀏覽器，可是有沒有官方文檔。事實上，若是fileset在大多數瀏覽器觸發BFC的話，也不要認爲其是理所固然的。 CSS2.1 並無定義當屬性應用與 form 和 frames 時的狀況。

二，Block formatting context的特性

BFC與非BFC元素區分的重要點是BFC的特性，BFC主要有三個特性。

屬於不一樣BFC中的想鄰元素的垂直外邊距將不會合並;
BFC閉合浮動;
BFC元素不會與浮動元素疊加;

1.Block formatting context禁止外邊距疊加：

每一個段落的上下垂直外邊距都是1em,由於段落3處於一個新建立的BFC中，因此上邊距不會像段落2和段落1同樣，發生合併。因此段落2和段落3的距離變成了2em。

demo

2.Block formatting context閉合浮動

BFC能創造閉合浮動，裏面的元素即便不用清除浮動，也不會溢出。例子中珊瑚色和天空藍色的方塊分別是左浮動和右浮動，可是它們都處於BFC閉合浮動中，別的說法是BFC中的元素參與高度計算。

demo

3.BFC元素不會與浮動元素疊加

根據概念，當一個BFC元素與浮動元素相鄰時，觸發BFC的元素的外邊框不會與浮動元素的外邊距疊加。

demo

　　如上圖，第一種狀況是黃色未浮動元素的一部分與浮動元素疊加，第二種是黃色塊觸發了BFC，BFC創造了一個隱形的外邊距。若是咱們要在兩個元素之間製造一些空間，能夠給左浮動元素添加外邊距，或者給BFC元素添加大於浮動寬度的外邊距。從而沒有與浮動元素疊加，這個特性是很是有用的特性。一種最簡單的應用BFC佈局的就是左圖右文字的佈局。

三，Block formatting context與hasLayout的比較

你可能注意到前面例子中樣式設置 overflow:hidden;zoom:1;前面一個聲明會建立BFC，後一個屬性會在Internet Explorer 8(S)如下中觸發hasLayout， zoom是設置或檢索所選對象的縮放比例，它是有些的瀏覽器私有屬性，Firefox和Opera並不支持，使用不多，可是它卻能觸發hasLayout，加上IEhack,就能兼容不支持BFC的瀏覽器。hasLayout是IE瀏覽器的私有屬性，由於IE低版本瀏覽器並支持W3C的BFC，但由於二者是很是接近的，觸發條件和BFC也相似，hasLayout也有BFC的相關特性。可是hasLayout和BFC的觸發條件不盡相同，因此同時保證它們都觸發是很重要的。

下列屬性會觸發hasLayout：

Internet Explorer 5 and 6

position:absolute;
position:fixed;
float(除none的任意值);
display:inline-block;
width(除"auto"的任意值);
height(除"auto"的任意值);
zoom(除"normal"的任意值);
writing-mode:tb-rl;

Internet Explorer 7

min-width（任意值）;
min-height(任意值);
max-width(除"none"的任意值);
max-height(除"none"的任意值);
設置overflow屬性的元素（除visible的任意）;
overflow-x和overflow-y(出visible的任意值);

要注意的是使用諸如 zoom 等瀏覽器私有屬性通不過W3C驗證，IE5.0並支持 zoom 屬性。當子元素的佈局流與父元素的佈局流不一樣時也會觸發hasLayout(如rtl到ltr).

怪異模式和 IE7 mode

當overflow設置的值是除visible的時，table-cell元素不會建立新的block formatting context;
當overflow設置的值是visble時，table-cell會建立一個新的block formatting context;

　　1.元素自帶hasLayout屬性

在Internet Explorer中， <body> ( 在嚴格模式中 <html> 也是 ) <table>, <tr>, <th>, <td>, <img>, <hr>, <input>, <button>, <select>, <textarea>, <fieldset>, <legend>, <iframe>, <embed>, <object>, <applet>,<marquee> 。

四，總結

BFC是一個佈局環境，它是一個相對獨立的空間，決定它怎樣影響外部和內部元素。BFC的本質是正常六，可是它主要有三個特性：屬於不一樣BFC中的相鄰元素的垂直外邊距不會合並，BFC能夠閉合浮動，BFC元素不會與浮動元素疊加。由於低版本的瀏覽器（IE8(S)如下）沒有BFC屬性，可是它們有一個私有屬性hasLayout，它的特性和BFC基本相同，可是它也可能致使一些bug。若是要兼容低版本瀏覽器（<IE8），能夠給觸發BFC的元素同時觸發hasLayout（通常使用zoom:1），相反也是如此。

參考：http://w3help.org/zh-cn/causes/RM8002 、 http://www.yuiblog.com/blog/2010/05/19/css-101-block-formatting-contexts/ ，http://kayosite.com/block-formatting-contexts-in-detail.html