CSS BFC 和 IE hasLayout

時間 2019-11-17

標籤 css bfc haslayout 欄目 CSS 简体版

原文原文鏈接

BFC：塊格式化上下文（block formatting context）css

它提供了一個獨立佈局的環境，每一個BFC都遵照同一套佈局規則。html

w3c規範中的BFC定義：瀏覽器

http://www.w3.org/TR/CSS2/visuren.html#block-formattingapp

浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不爲「visiable」的塊級盒子，都會爲他們的內容建立新的BFC（塊級格式上下文）。佈局

在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生摺疊。flex

在BFC中，每個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來講，則觸碰到右邊緣）。spa

BFC的通俗理解：orm

首先BFC是一個名詞，是一個獨立的佈局環境，咱們能夠理解爲一個箱子（其實是看不見摸不着的），箱子裏面物品的擺放是不受外界的影響的。htm

轉換爲BFC的理解則是：blog

BFC中的元素的佈局是不受外界的影響（咱們每每利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響。）

而且在一個BFC中，塊盒與行盒（行盒由一行中全部的內聯元素所組成）都會垂直的沿着其父元素的邊框排列。

觸發 BFC 的條件以下：

浮動元素，float 除 none 之外的值

絕對定位元素，position（absolute，fixed）

display 爲如下其中之一的值 inline-blocks，table-cells，table-captions

overflow 除了 visible 之外的值（hidden，auto，scroll）

彈性盒 flex boxes (元素 display: flex 或 inline-flex)

觸發BFC的做用：

BFC 會阻止外邊距摺疊

BFC 能夠包含浮動的元素

BFC 能夠阻止元素被浮動元素覆蓋

hasLayout：

‘Layout’ 是 IE 的專有概念，它決定了元素如何對其內容進行定位和尺寸計算，與其餘元素的關係和相互做用，以及對應用還有使用者的影響。

概念說明：

‘Layout’ 能夠被某些 CSS property（特性）不可逆的觸發，而某些 HTML 元素自己就具備 layout 。

‘Layout’ 在 IE 中能夠經過 hasLayout 屬性來判斷一個元素是否擁有 layout ，如 object.currentStyle.hasLayout 。

‘Layout’ 是 IE 瀏覽器渲染引擎的一個內部組成部分。在 IE 瀏覽器中，一個元素要麼本身對自身的內容進行組織和計算大小，要麼依賴於包含塊來計算尺寸和組織內容。爲了協調這兩種方式的矛盾，渲染引擎採用了 ‘hasLayout’ 屬性，屬性值能夠爲 true 或 false。當一個元素的 ‘hasLayout’ 屬性值爲 true 時，咱們說這個元素擁有了一個佈局（layout），即成功觸發hasLayout

觸發方式：

默認擁有佈局的元素：

<img>

<hr>

可觸發 hasLayout 的 CSS 特性：

display: inline-block /*ALL*/

height: (除 auto 外任何值) /*僅適用IE6 7*/

width: (除 auto 外任何值) /*僅適用IE6 7*/

float: (left 或 right) /*ALL*/

position: absolute /*ALL*/

writing-mode: tb-rl /*ALL*/

zoom: (除 normal 外任意值) /*僅適用IE6 7*/

IE7 還有一些額外的屬性(不徹底列表)能夠觸發 hasLayout ：

min-height: (任意值)/*如下適用IE7+*/

min-width: (任意值)

max-height: (除 none 外任意值)

max-width: (除 none 外任意值)

overflow: (除 visible 外任意值，僅用於塊級元素)

overflow-x: (除 visible 外任意值，僅用於塊級元素)

overflow-y: (除 visible 外任意值，僅用於塊級元素)

position: fixed

IE6 之前的版本（也包括 IE6 及之後全部版本的混雜模式，其實這種混雜模式在渲染方面就至關於 IE 5.5），經過設置任何元素的 ‘width’ 或 ‘height’（非auto）均可以觸發 hasLayout ；但在 IE6 和 IE7 的標準模式中的行內元素上卻不行，設置 ‘display:inline-block’ 才能夠。

hasLayout的做用與BFC相差不大

特色：顯示背景圖：在 IE 7 及如下的 IE 版本中，沒有設置高度、寬度的元素每每不能顯示出背景圖（背景色則顯示正常），這實際上與 hasLayout 有關。實際的狀況是，沒有觸發 hasLayout 的元素不能顯示背景圖，上面有說過，觸發 hasLayout 也就是使到元素擁有佈局，換句話說，擁有佈局的元素才能正確顯示背景圖。

參考文章：

http://kayosite.com/block-formatting-contexts-in-detail.html

http://kayosite.com/internet-explorer-haslayout-in-detail.html

http://www.cnblogs.com/pigtail/archive/2013/01/23/2871627.html

https://developer.mozilla.org/zh-CN/docs/Web/CSS/Block_formatting_context#Specifications

http://www.aliued.cn/2012/12/31/css佈局中一個簡單的應用bfc的例.html

http://www.smallni.com/haslayout-block-formatting-contexts/

http://www.17leba.com/haslayout與bfcblock-formatting-contexts的深刻理解/