BFC 和 haslayout

在解釋 BFC 是什麼以前，須要先介紹 Box、Formatting Context的概念。

Box: CSS佈局的基本單位
        Box 是 CSS 佈局的對象和基本單位， 直觀點來講，就是一個頁面是由不少個 Box 組成的。
        元素的類型和 display 屬性，決定了這個 Box 的類型。 不一樣類型的 Box， 會參與不一樣的 Formatting Context（一個決定如何渲染文檔的容器），
        所以Box內的元素會以不一樣的方式渲染。讓咱們看看有哪些盒子：
            block-level box:
                display 屬性爲 block, list-item, table 的元素，會生成 block-level box。而且參與 block fomatting context；
            inline-level box:
                display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box。
                而且參與 inline formatting context
    
Formatting context(格式化上下文) 　　
            Formatting context 是 W3C CSS2.1 規範中的一個概念。
            它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。
            最多見的 Formatting context 有 Block fomatting context (簡稱BFC)
                                        Inline formatting context (簡稱IFC)。

 

什麼是BFC

BFC(Block formatting context)直譯爲"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 
                             它規定了內部的Block-level Box如何佈局，而且與這個區域外部絕不相干

 

BFC佈局規則：

    1.內部的Box會在垂直方向，一個接一個地放置。
    2.BFC的區域不會與float box重疊。
    3.內部的Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
    4.計算BFC的高度時，浮動元素也參與計算。(清除浮動   haslayout)
    5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。 

 

BFC何時出現(哪些元素會生成BFC?)

    根元素
    float屬性不爲none
    position爲absolute或fixed
    overflow不爲visible
    display爲inline-block, table-cell, table-caption, flex, inline-flex

 

什麼是haslayout

    layout是windows IE的一個私有概念，它決定了元素如何對其內容定位和尺寸計算，
    以及與其餘元素的關係和相互做用。當一個元素「擁有佈局」時，它會負責自己及其子元素的尺寸和定位。
    而若是一個元素「沒有擁有佈局」，那麼它的尺寸和位置由最近的擁有佈局的祖先元素控制。
    
    必須說明的是，IE8及以上瀏覽器使用了全新的顯示引擎，已經不在使用haslayout屬性，
    所以haslayout屬性只針對IE6和IE7。

 

爲何會有haslayout

    理論上說，每一個元素都應該控制本身的尺寸和定位，即每一個元素都應該「擁有佈局」，固然這只是理想狀態。
    而對於早期的IE顯示引擎來講，若是全部元素都「擁有佈局」的話，會致使很大的性能問題。
    所以IE開發團隊決定使用佈局概念來減小瀏覽器的性能開銷，即只將佈局應用於實際須要的那些元素，
    因此便出現了「擁有佈局」和「沒有擁有佈局」兩種狀況。

 

默認擁有佈局的元素

    html, body, table, tr, td, img, hr,
    input, select, textarea, button,
    iframe, embed, object, applet, marquee

 

怎麼觸發haslayout

    float: left或right
    display: inline-block
    position: absolute
    width: 除auto外任何值
    height: 除auto外任何值
    zoom: 除normal外任何值
    writing-mode: tb-rl

　　在IE7中，如下屬性也能夠觸發元素的haslayout
　　　　min-height: 任意值
　　　　min-width:  任意值
　　　　max-height: 除none 外任意值
　　　　max-width:  除none 外任意值
　　　　overflow:   除visible外任意值，僅用於塊級元素
　　　　overflow-x: 除visible 外任意值，僅用於塊級元素
　　　　overflow-y: 除visible 外任意值，僅用於塊級元素
　　　　position:   fixed