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的深刻理解/

1. CSS BFC和IE Haslayout介绍
2. CSS BFC hasLayout模型
3. BFC和haslayout
4. BFC 和 haslayout
5. BFC，hasLayout
6. 关于Block Formatting Context－－BFC和IE的hasLayout
7. 谈BFC和haslayout
8. BFC、haslayout
9. 谈谈BFC与ie特有属性hasLayout
10. 说说bfc 和 HasLayout
更多相关文章...
• CSS 指南 - 网站建设指南
• W3C CSS 活动 - W3C 教程
• 适用于PHP初学者的学习线路和建议
• IntelliJ IDEA 代码格式化配置和快捷键