• 有关 hasLayout 和 BFC


    1. hasLayout

    • 概念说明
      • ‘Layout’ 可以被某些 CSS property(特性)不可逆的触发,而某些 HTML 元素本身就具有 layout 。
      • ‘Layout’ 在 IE 中可以通过 hasLayout 属性来判断一个元素是否拥有 layout ,如 object.currentStyle.hasLayout 。
      • ‘Layout’ 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中,一个元素要么自己对自身的内容进行组织和计算大小, 要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾,渲染引擎采用了 ‘hasLayout’ 属性,属性值可以为 true 或 false。 当一个元素的 ‘hasLayout’ 属性值为 true 时,我们说这个元素有一个布局(layout),或拥有布局。
    • 触发方式
      • 默认拥有布局的元素:
        <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 外任何值)
         (除 auto 外任何值)
        float: (left 或 right)
        position: absolute
        writing-mode: tb-rl
        zoom: (除 normal 外任意值)
      • IE7 还有一些额外的属性(不完全列表)可以触发 hasLayout :
        min-height: (任意值)
        min- (任意值)
        max-height: (除 none 外任意值)
        max- (除 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://www.w3.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的作用

    1)解决元素内部浮动问题

    如果父元素的子元素有浮动,那么在父元素上激活hasLayout和BFC就可以清除浮动了,最长见的是设置样式zoom:1(IE6下激活hasLayout),overflow:hidden(激活标准浏览器下的MFC).

    父元素
    浮动子元素
    设置.bfc{zoom:1; overflow:hidden}后激活hasLayout和MFC后的示例图:
    父元素.bfc{zoom:1; overflow:hidden}
    浮动子元素
    2)浮动元素和常规流元素重叠问题
    当浮动元素右边跟随的是常规流元素时,浮动元素会和常规流元素会重叠。如下图:
    浮动子元素

    常规流元素

    设置常规流元素.bfc{overflow:hidden; zoom:1}激活hasLayout和BFC便可解决问题,如下图:
    浮动子元素

    常规流元素.bfc{zoom:1; overflow:hidden}

    3)解决相邻元素margin边距重叠问题

    先说一下margin边距重叠触发的条件:两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。这里的毗邻是指:没有被非空内容、padding、border 或 clear 分隔开。在没有被分隔开的情况下,父元素margin-top和普通流中的第一个子元素(非浮动元素等)的 margin-top 相邻; 在这个元素的 height 是 “auto” 的情况下,它的 margin-bottom 才会和它普通流中的最后一个子元素(非浮动元素等)的 margin-bottom 相邻。以及普通流中非浮动元素等兄弟元素间的上下边距之间也会重叠。

    父子元素上边距重叠
    子元素,上边距10px
    兄弟元素上下边距重叠
    子元素1,下边距10px
    子元素2,上边距10px

    那怎么清除边距重叠呢,方法如下:
    1.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠(注意这里指的是上下相邻的元素)
    2.创建了BFC块级格式化上下文的元素,不和它的子元素发生 margin 折叠(注意这里指的是创建了BFC的元素和它的子元素不会发生折叠)
    这里我们需要指出的是:相邻元素不发生折叠的因素是触发BFC因素的子集,也就是说如果我为上下相邻的元素设置了overflow:hidden,虽然触发了BFC,但是上下元素的上下margin还是会发生折叠参考文章:

  • 相关阅读:
    A1051 Pop Sequence (25 分)
    A1060 Are They Equal (25分)
    A1063 Set Similarity (25分)
    A1037 Magic Coupon (25分)
    Mybatis获取插入记录的自增长ID
    压力测试工具ab的使用
    spring注解
    《spring技术内幕》读书笔记(1)——什么是POJO模式
    用HttpSessionListener统计在线用户或做账号在线人数管理
    (转)注释驱动的 Spring cache 缓存介绍
  • 原文地址:https://www.cnblogs.com/taocom/p/3069359.html
Copyright © 2020-2023  润新知