hasLayout&&BlockFormattingContexts_html/css_WEB-IT

转自：http://HdhCmsTestsmallni测试数据/haslayout-block-formatting-contexts/

因为本人脑子不好使，自己打印出了一张hasLayout和Block Formatting Contexts（以下简称BFC）的触发表贴在办公桌上（也可以称作创建了BFC），每天看看就记住了，不知道大家有没有对这2个东西做过深入了解，如果真的做过了解，一些各浏览器部分奇怪的BUG也会迎刃而解。今天，我们一起来剖析下，揭开它们神秘的面纱。

1.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 触发方式：默认拥有布局的元素：

 ,   ,  ,  ,     ,  ,  ,  ,  ,   ,  ,

可触发 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’ 才可以。

2.Block Formatting Contexts（BFC）

IE有它自己的hasLayout属性，那么非IE浏览器呢？非IE浏览器采用的就是BFC（块格式化上下文）

概念说明： BFC 是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。在创建了 BFC的元素中，其子元素会一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。在BFC中相邻的块级元素的垂直边距会折叠（collapse）。在BFC 中，每一个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即使存在浮动也是如此（尽管一个元素的内容区域会由于浮动而压缩），除非这个元素也创建了一个新的BFC。在CSS3中，对这个概念做了改动：http://HdhCmsTestw3.org/TR/css3-box/#block-level0CSS3中，将BFC 叫做 flow root。触发方式

float:(任何值除了none)overflow:（任何值除了visible）display:(table-cell/table-caption/inline-block)position:(任何值除了static/relative)

Tips:我们有时会用overflow:hidden的方法去清除浮动，就是因为触发了元素的块格式化上下文(IE6 7要申明zoom为1)，这个方法的确简单，但很暴力 ? -#

3. hasLayout 和 BFC 的特点

3.1 在触发 hasLayout 的元素和创建了 BFC的元素中，浮动元素参与高度的计算

情况1：没有创建 BFC的块级非替换元素，触发了 IE 的 hasLayout。

分析以下代码：

simple text

in flow

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did108382

更新时间：2022-11-17 阅读：31次