hasLayout和BFC

搞过浏览器兼容的都知道,ie之所以有那么多兼容性问题,主要就是hasLayout引起的

什么是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

 

触发方式
  • 默认拥有布局的元素:
    <html>, <body>
    <table>, <tr>, <th>, <td>
    <img>
    <hr>
    <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
    <iframe>, <embed>, <object>, <applet>
    <marquee>

     

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

 

什么是BFC(Block formatting context)

IE有它自己的hasLayout属性,那么非IE浏览器呢?非IE浏览器采用的就是BFC(块格式化上下文)

从样式上看,具有 BFC 的元素与普通的容器没有什么区别,但是从功能上,具有 BFC 的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,例如可以包含浮动元素,上文中的第二类清除浮动的方法(如 overflow 方法)就是触发了浮动元素的父元素的 BFC ,使到它可以包含浮动元素,从而防止出现高度塌陷的问题。

简单来说,BFC 就是一种属性,这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。

触发方式
float:(任何值除了none)
overflow:(任何值除了visible)
display:(table-cell/table-caption/inline-block)
position:(任何值除了static/relative)
BFC特性

1. BFC可以包含浮动元素

这也正是使用 overflow: hidden 与 overflow: auto 方法闭合浮动的原理,使用 overflow: hidden 或 overflow: auto 触发浮动元素的父元素的 BFC 特性,从而可以包含浮动元素,闭合浮动。

W3C 的原文是“’Auto’ heights for block formatting context roots”,也就是 BFC 会根据子元素的情况自动适应高度,即使其子元素中包括浮动元素。


2. BFC可以阻止元素被浮动元素覆盖

 

 


3. BFC可以阻止子元素发生外边距折叠
边距折叠

边距未折叠