說說bfc 和 HasLayout

你確定用到過，但你可能從沒聽過這兩單詞，剛接觸的時候，我實在沒法把這兩單詞與我常做的行爲連在一塊兒，糾結了一個下午，我瘋了。

 

BFC(Block Formatting Context)，簡單講，它是提供了一個獨立佈局的環境，每一個BFC都遵照同一套佈局規則。有人作出很恰當的比喻：

你能夠把一個頁面想象成大的集裝箱，這個集裝箱裏裝的貨物就是HTML元素。在現實生活中爲了不不一樣人的貨物相互混淆，都是把貨物打好包裝再裝入集裝箱，這樣的話不管你包裝裏面的貨物怎麼擺放，都不會影響到其餘人的貨物。那麼這個包裝就能夠被想象成Block Formatting Context。

HasLayout    當一個元素的 hasLayout 屬性值爲true時，咱們說這個元素有一個佈局（layout）

觸發HasLayout

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

Internet Explorer 7 還有一些額外的屬性(不徹底列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

觸發BFC

• float：left|right
• position：absolute|fixed
• display: table-cell|table-caption|inline-block
• overflow: hidden|scroll|auto