BFC 和 haslayout

Posted 2021-02-02 fxiong

在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。

Box: CSS布局的基本单位
        Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。
        元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），
        因此Box内的元素会以不同的方式渲染。让我们看看有哪些盒子：
            block-level box:
                display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
            inline-level box:
                display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。
                并且参与 inline formatting context
    
Formatting context(格式化上下文) 　　
            Formatting context 是 W3C CSS2.1 规范中的一个概念。
            它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
            最常见的 Formatting context 有 Block fomatting context (简称BFC)
                                        Inline formatting context (简称IFC)。

 

什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 
                             它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干

 

BFC布局规则：

    1.内部的Box会在垂直方向，一个接一个地放置。
    2.BFC的区域不会与float box重叠。
    3.内部的Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
    4.计算BFC的高度时，浮动元素也参与计算。(清除浮动   haslayout)
    5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。 

 

BFC什么时候出现(哪些元素会生成BFC?)

    根元素
    float属性不为none
    position为absolute或fixed
    overflow不为visible
    display为inline-block, table-cell, table-caption, flex, inline-flex

 

什么是haslayout

    layout是windows IE的一个私有概念，它决定了元素如何对其内容定位和尺寸计算，
    以及与其他元素的关系和相互作用。当一个元素“拥有布局”时，它会负责本身及其子元素的尺寸和定位。
    而如果一个元素“没有拥有布局”，那么它的尺寸和位置由最近的拥有布局的祖先元素控制。
    
    必须说明的是，IE8及以上浏览器使用了全新的显示引擎，已经不在使用haslayout属性，
    因此haslayout属性只针对IE6和IE7。

 

为什么会有haslayout

    理论上说，每个元素都应该控制自己的尺寸和定位，即每个元素都应该“拥有布局”，当然这只是理想状态。
    而对于早期的IE显示引擎来说，如果所有元素都“拥有布局”的话，会导致很大的性能问题。
    因此IE开发团队决定使用布局概念来减少浏览器的性能开销，即只将布局应用于实际需要的那些元素，
    所以便出现了“拥有布局”和“没有拥有布局”两种情况。

 

默认拥有布局的元素

    html, body, table, tr, td, img, hr,
    input, select, textarea, button,
    iframe, embed, object, applet, marquee

 

怎么触发haslayout

    float: left或right
    display: inline-block
    position: absolute
    width: 除auto外任何值
    height: 除auto外任何值
    zoom: 除normal外任何值
    writing-mode: tb-rl

　　在IE7中，以下属性也可以触发元素的haslayout
　　　　min-height: 任意值
　　　　min-width:  任意值
　　　　max-height: 除none 外任意值
　　　　max-width:  除none 外任意值
　　　　overflow:   除visible外任意值，仅用于块级元素
　　　　overflow-x: 除visible 外任意值，仅用于块级元素
　　　　overflow-y: 除visible 外任意值，仅用于块级元素
　　　　position:   fixed