關於塊級格式化上下文(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的值除staticrelative之外的值;
  • 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-cellposition: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-xoverflow-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),相反也是如此。
相關文章
相關標籤/搜索