BFC，hasLayout

時間 2019-12-04

標籤 bfc haslayout 简体版

原文原文鏈接

塊格式化上下文 Block formatting context
行內格式化上下文 Inline formatting contextcss

它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。html

建立BFCcss3

浮動元素
絕對定位元素
行內塊元素
單元格
表格標題元素
overflow 非 "visible"的元素
css3中flex boxes

IE 專有的 Layout 及 hasLayout 屬性

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

概念說明：
'Layout' 能夠被某些 CSS property（特性）不可逆的觸發，而某些 HTML 元素自己就具備 layout 。
'Layout' 在 IE 中能夠經過 hasLayout 屬性來判斷一個元素是否擁有 layout ，如 object.currentStyle.hasLayout 。
'Layout' 是 IE 瀏覽器渲染引擎的一個內部組成部分。在 IE 瀏覽器中，一個元素要麼本身對自身的內容進行組織和計算大小，要麼依賴於包含塊來計算尺寸和組織內容。爲了協調這兩種方式的矛盾，渲染引擎採用了 'hasLayout' 屬性，屬性值能夠爲 true 或 false。當一個元素的 'hasLayout' 屬性值爲 true 時，咱們說這個元素有一個佈局（layout），或擁有佈局。
觸發方式：
默認擁有佈局的元素：app

<html>, <body>
<table>, <tr>, <th>, <td>
<img>,<hr>
<input>, <button>, <select>, <textarea>, <fieldset>, <legend>
<iframe>, <embed>, <object>, <applet>,<marquee>

可觸發 hasLayout 的 CSS 特性：
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
IE7 還有一些額外的屬性(不徹底列表)能夠觸發 hasLayout ：
min-height: (任意值)
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' 才能夠。ide

hasLayout 和 block formatting context 的異同及可能產生的問題

區別佈局

在 IE8(S) 以前的版本中，沒有規範中說起的 block formatting context 和 Inline formatting context 概念，而是用 hasLayout 來達到類似的目的。
在 IE 中可經過設置 'width'、'height'、'min-width'、'min-height'、'max-width'、'max-height'、'zoom'、'writing-mode' 來觸發 hasLayout，而這些特性值的設置不可以使元素建立 block formatting context。
在 IE 中不少元素默認就是擁有佈局的，如 IPUNT, BUTTON, SELECT, TEXTAREA 等，可是這些元素在標準中會造成 Inline formatting context 。flex

共同點ui

二者都是決定了對內容如何定位及大小計算的規則。
二者都決定了與其餘元素的相互做用的規則。
'table-cell' 和 'table-caption' 既是 hasLayout 的元素，又是能夠建立 block formatting context 的元素。
浮動元素，絕對定位元素，inline-block 元素以及除 'visible' 外任意值的 overflow(IE7) 在 IE 中能夠觸發 hasLayout，同時在標準中，又能夠建立 block formatting context。flexbox

可能產生的兼容性問題：

因爲 hasLayout 和 block formatting context 是對一類事物的不一樣理解，而且他們的啓用條件不盡相同，所以若是一個元素設計時，在 IE 早期版本中觸發了 hasLayout ，但在其餘瀏覽器中又沒有建立 block formatting context，或者相反，一個元素在 IE 早期版本中沒有觸發 hasLayout ，在其餘瀏覽器中卻建立了 block formatting context（如設置了 'overflow:hidden' ），將致使頁面佈局的重大差別。

解決方案
僅當一個元素即在 IE 早期版本中觸發了 hasLayout，又在其餘瀏覽器中建立了 block formatting context 時，才能避免上述問題的發生。即同時啓用上述二者以保證各瀏覽器的兼容，或者相反，二者皆不啓用。

使元素即生成了 block formatting context，又觸發了 hasLayout
對於觸發 hasLayout 的元素，經過 CSS 設置，使它產生 block formatting context；
生成 block formatting context 可是沒有觸發 hasLayout 的元素，經過設置 'zoom:1'，使其觸發 hasLayout。
使元素即沒有觸發 hasLayout，又沒有建立 block formatting context。

w3c傳送門：BFC and IFC
MDN傳送門：Block formatting context

參考：
一、BFC：Block Formatting Context.
二、常規流
三、hasLayout

相關標籤/搜索

haslayout

bfc

深刻BFC

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。