不是誰都像你同樣只向着前方就能活下去了,你就拋棄那些沒用的同伴前行就行了,你註定是要成爲海賊王的男人吧,而我就算沒有遠大的目標也能夠。——《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。
2.Block formatting context閉合浮動
BFC能創造閉合浮動,裏面的元素即便不用清除浮動,也不會溢出。例子中珊瑚色和天空藍色的方塊分別是左浮動和右浮動,可是它們都處於BFC閉合浮動中,別的說法是BFC中的元素參與高度計算。
3.BFC元素不會與浮動元素疊加
根據概念,當一個BFC元素與浮動元素相鄰時,觸發BFC的元素的外邊框不會與浮動元素的外邊距疊加。
如上圖,第一種狀況是黃色未浮動元素的一部分與浮動元素疊加,第二種是黃色塊觸發了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;
在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),相反也是如此。