標籤：style class code http tar ext
hasLayout與BFC是分別在IE和其他瀏覽器上的兩個作用很相近的概念，在很多時候，我們需要觸發它們去實現有些效果。例如清除浮動時需要觸發hasLayout與BFC；很多自適應的兩欄和三欄布局（兩邊固定寬度，中間自適應）需要觸發hasLayout與BFC；很多奇形怪狀的IE bug的解決需要觸發hasLayout…至於詳細的用法這裡就不做詳細說明了，這裡說說觸發hasLayout與BFC的條件：
hasLayoutLayout是 IE 的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其他元素的關係和相互作用。HTML的元素中，有些是預設就已經觸發了Layout，而有些預設沒有觸發。當IE的Layout被觸發後，我們就說該元素“擁有布局”，使用object.currentStyle.hasLayout可擷取到ture值，否則將擷取到false，並且Layout的觸發是無法復原的。關於Layout的更詳細介紹，推薦這篇文章《On having layout》。hasLayout的觸發條件如下：
- display: inline-block
- height: (除 auto 外任何值)
- width: (除 auto 外任何值)
- float: (left 或 right)
- position: absolute
- zoom: (除 normal 外任意值)
- writing-mode: tb-rl
附1：IE7特有的觸發Layout的屬性
- min-height: (任意值)
- min-width: (任意值)
- max-height: (除 none 外任意值)
- max-width: (除 none 外任意值)
- overflow: (除 visible 外任意值，僅用於區塊層級元素)
- overflow-x: (除 visible 外任意值，僅用於區塊層級元素)
- overflow-y: (除 visible 外任意值，僅用於區塊層級元素)
- position: fixed
附2：預設觸發Layout的HTML元素
<html>, <body><table>, <tr>, <th>, <td><img><hr><input>, <button>, <select>, <textarea>, <fieldset>, <legend><iframe>, <embed>, <object>, <applet><marquee>BFC
BFC，塊格式化上下文( Block formatting context )，是指初始化區塊層級元素定義的環境。在CSS中，元素定義的環境有兩種，一種是塊格式化上下文( Block formatting context )，另一種是行內格式化上下文( Inline formatting context )。其中我們使用比較多的是塊級可視化上下文，CSS3草案中將之稱為“flow root”，但我們仍習慣叫BFC，其的觸發條件如下：
- 浮動元素（float除了none）
- 絕對位置元素(absolute/fixed)
- 設定了’display’ 屬性為 “inline-block”，”table-cell”， “table-caption” 的元素
- 設定了overflow 非 “visible”的元素
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
