BFC 是什么？有什么用？

时间 2019-11-08

标签 bfc 什么繁體版

原文原文链接

BFC 是前端面试中的一个常考的点，下面介绍一下什么是BFC，有什么用

一. BFC 是什么？

BFC（Block Formatting Context）直译为“块级格式化范围”。

是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其余元素的关系和相互做用。当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中按照必定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。好比浮动元素会造成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。这里有点相似一个BFC就是一个独立的行政单位的意思。也能够说BFC就是一个做用范围。能够把它理解成是一个独立的容器，而且这个容器的里box的布局，与这个容器外的绝不相干。html

另外一个通俗点的解释是：在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ，类型能够是 block ，或者是 inline，但不能同时属于这二者。而且， Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化， Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里格式化。任何被渲染的元素都属于一个 box ，而且不是 block ，就是inline 。即便是未被任何元素包裹的文本，根据不一样的状况，也会属于匿名的 block boxes 或者 inline boxes。因此上面的描述，便是把全部的元素划分到对应的 formatting context 里。前端

其通常表现规则，我整理了如下这几个状况：面试

一、在建立了 Block Formatting Context 的元素中，其子元素按文档流一个接一个地放置。垂直方向上他们的起点是一个包含块的顶部，两个相邻的元素之间的垂直距离取决于 ‘margin’ 特性。浏览器

根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。bash

根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。因此解决这种问题的办法是要为两个容器添加具备BFC的包裹容器。app

二、在 Block Formatting Context 中，每个元素左外边与包含块的左边相接触（对于从右到左的格式化，右外边接触右边），即便存在浮动也是如此（尽管一个元素的内容区域会因为浮动而压缩），除非这个元素也建立了一个新的 Block Formatting Context 。ide

三、Block Formatting Context就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。布局

四、根据 CSS 2.1 9.5 Floats 中的描述，建立了 Block Formatting Context 的元素不能与浮动元素重叠。ui

表格的 border-box、块级的替换元素、或是在普通流中建立了新的 block formatting context（如元素的 'overflow' 特性不为'visible' 时）的元素不能够与位于相同的 block formatting context 中的浮动元素相重叠。spa

5 、当容器有足够的剩余空间容纳 BFC 的宽度时，全部浏览器都会将 BFC 放置在浮动元素所在行的剩余空间内。

六、在 IE6 IE7 IE8 Chrome Opera 中，当 BFC 的宽度介于 "容器剩余宽度" 与 "容器宽度" 之间时，BFC 会显示在浮动元素的下一行；在 Safari 中，BFC 则仍然保持显示在浮动元素所在行，而且 BFC 溢出容器；在 Firefox 中，当容器自己也建立了 BFC 或者容器的 'padding-top'、'border-top-width' 这些特性不都为 0 时表现与 IE8(S)、Chrome 相似，不然表现与 Safari 相似。

经验证，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。

七、在 IE6 IE7 IE8 Opera 中，当 BFC 的宽度大于 "容器宽度" 时，BFC 会显示在浮动元素的下一行；在 Chrome Safari 中，BFC 则仍然保持显示在浮动元素所在行，而且 BFC 溢出容器；在 Firefox 中，当容器自己也建立了 BFC 或者容器的 'padding- top'、'border-top-width' 这些特性不都为 0 时表现与 IE8(S) 相似，不然表现与 Chrome 相似。

经验证，最新版本的浏览中只有firefox会在同一行显示，其它浏览器均换行。

八、根据CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 block formatting context 的元素的高度时，其浮动子元素应该参与计算。

若是还有其它状况，请各位回得中补充，我会及时更新！

下面先看一个比较典型的例子：

<!DOCTYPE html><html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>BFC</title>    
    <style>        
        *{            
            padding: 0;            
            margin: 0;        
        }        
        #red,#yellow,#orange,#green{ 
            width: 100px;            
            height: 100px;            
            float: left;        
        }        
        #red{ 
            background-color: red;        
        }        
        #yellow{ 
            background-color: yellow;        
        }        
        #orange{ 
            background-color: orange;        
        }        
        #green{ 
            background-color: green;        
        }    
    </style>
</head>
<body>    
    <div id="c1">        
        <div id="red"></div>        
        <div id="yellow"></div>    
    </div>    
    <div id="c2">        
        <div id="orange"></div>        
        <div id="green"></div>    
    </div>    
    <p>Hellow,everyone,Here is the text!</p>
</body>
</html>复制代码

效果以下：

该段代码本意要造成两行两列的布局，可是因为#red，#yellow，#orange，#green四个div在同一个布局环境BFC中，所以虽然它们位于两个不一样的div（#c1和#c2）中，但仍然不会换行，而是一行四列的排列。

若要使之造成两行两列的布局，就要建立两个不一样的布局环境，也能够说要建立两个BFC。那到底怎么建立BFC呢？

2、如何产生BFC

当一个HTML元素知足下面条件的任何一点，均可以产生Block Formatting Context：

float的值不为none。

overflow的值不为visible。

display的值为table-cell, table-caption, inline-block中的任何一个。

position的值不为relative和static。

若是还其它方式，请在回复中给出，我会及时更新！！

上面的例子，我再加两行代码，建立两个BFC：

#c1,#c2{
    overflow:hidden;
} 复制代码

效果以下：

上面建立了两个布局环境BFC。内部子元素的左浮动不会影响到外部元素。因此#c1和#c2没有受浮动的影响，仍然各自占据一行！

3、BFC能用来作什么？

a、不和浮动元素重叠

若是一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，不少自适应的两栏布局就是这么作的。

很明显，.aside 和 .mian重叠了。试分析一下，因为两个 box 都处在同一个 BFC 中，都是以 BFC 边界为起点，若是两个 box 自己都具有 BFC 的话，会按顺序一个一个排列布局，如今 .main 并不具有 BFC ，按照规则2，内部元素都会从左边界开始，除非它自己具有 BFC ，按上面规则 4 拥有 BFC 的元素是不能够跟浮动元素重叠的，因此只要为 .mian 再建立一个 BFC ,就能够解决这个重叠的问题。上面已经说过建立 BFC 的方法，能够根据具体状况选用不一样的方法，这里我选用的是加 overflow:hidden。

.main{
    overflow:hidden;
}复制代码

效果：

因为ie的缘由须要再加一个解发haslayout的zoom:1，有关haslayout后面会讲到。

b、清除元素内部浮动

只要把父元素设为 BFC 就能够清理子元素的浮动了，最多见的用法就是在父元素上设置 overflow : hidden 样式，对于 IE6 加上 zoom :1 就能够了( IE Haslayout )。

看下面例子：

<!DOCTYPE html><html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>Document</title>    
    <style>        
        html,body{            
            height: 100px;        
        }        
        *{            
            padding: 10px;            
            margin: 0;            
            color: #000; 
            text-decoration: none;            
            list-style: none;            
            font-family: "微软雅黑";        
        }        
        .outer{            
            width: 300px;            
            border: 1px solid #666; 
            padding: 10px;        
        }        
        .innerLeft{            
            width: 100px;            
            height: 100px;            
            background: #f00; 
            float: left;        
        }        
        .innerRight{            
            width: 100px;            
            height: 100px;            
            background: #090; 
            float:right;        
        }    
    </style>
</head>
<body>    
    <div class="outer">        
        <div class="innerLeft"></div>        
        <div class="innerRight"></div>    
    </div>
</body>
</html>复制代码

效果图：

根据 CSS2.1 规范第 10.6.3 部分的高度计算规则，在进行普通流中的块级非替换元素的高度计算时，浮动子元素不参与计算。

同时 CSS2.1 规范第10.6.7部分的高度计算规则，在计算生成了 block formatting context 的元素的高度时，其浮动子元素应该参与计算。

因此，触发外部容器BFC，高度将从新计算。好比给outer加上属性overflow:hidden触发其BFC。

效果图：

c、解决上下相邻两个元素重叠

看下面的例子：

<!DOCTYPE html><html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>Document</title>    
    <style>        
        html,body{            
            height: 100%;        
        }        
        *{            
            padding: 0;            
            margin: 0;            
            color: #fff; 
            text-decoration: none;            
            list-style: none;            
            font-family: "微软雅黑";        
        }        
        .rowone{            
            background: #f00; 
            height: 100px;            
            margin-bottom: 20px;            
            overflow: hidden;        
        }        
        .rowtwo{            
            background: #090; 
            height: 100px;            
            margin-top: 20px;            
            position: relative;        
        }    
    </style>
</head>
<body>    
    <div class="rowone"></div>    
    <div class="rowtwo"></div>
</body>
</html>复制代码

效果以下：

根据 CSS 2.1 8.3.1 Collapsing margins 第一条，两个相邻的普通流中的块框在垂直位置的空白边会发生折叠现象。也就是处于同一个BFC中的两个垂直窗口的margin会重叠。

根据 CSS 2.1 8.3.1 Collapsing margins 第三条，生成 block formatting context 的元素不会和在流中的子元素发生空白边折叠。因此解决这种问题的办法是要为两个容器添加具备BFC的包裹容器。

因此解这个问题的办法就是,把两个容器分别放在两个据有 BFC 的包裹容器中，IE 里就是触发layout 的两个包裹容器中！

效果以下图：

4、什么是IE的haslayout

上面的例子中咱们用到了IE的zoom:1;其实是触发了IE的layout。Layout 是 IE 浏览器渲染引擎的一个内部组成部分。在 IE 浏览器中，一个元素要么本身对自身的内容进行组织和计算大小，要么依赖于包含块来计算尺寸和组织内容。为了协调这两种方式的矛盾，渲染引擎采用了 ‘hasLayout’ 属性，属性值能够为 true 或 false。当一个元素的 ‘hasLayout’ 属性值为 true时，咱们说这个元素有一个布局（layout），或拥有布局。能够经过 hasLayout 属性来判断一个元素是否拥有 layout ，

如 object.currentStyle.hasLayout 。

hasLayout 与 BFC 有不少类似之处，但 hasLayout 的概念会更容易理解。在 Internet Explorer 中，元素使用“布局”概念来控制尺寸和定位，分为拥有布局和没有布局两种状况，拥有布局的元素由它控制自己及其子元素的尺寸和定位，而没有布局的元素则经过父元素（最近的拥有布局的祖先元素）来控制尺寸和定位，而一个元素是否拥有布局则由 hasLayout 属性告知浏览器，它是个布尔型变量，true 表明元素拥有布局，false 表明元素没有布局。简而言之，hasLayout 只是一个 IE 下专有的属性，hasLayout 为 true 的元素浏览器会赋予它一系列的效果。

特别注意的是，hasLayout 在 IE 8 及以后的 IE 版本中已经被抛弃，因此在实际开发中只需针对 IE 8 如下的浏览器为某些元素触发 hasLayout。

5、怎样触发layout

一个元素触发 hasLayout 会影响一个元素的尺寸和定位，这样会消耗更多的系统资源，所以 IE 设计者默认只为一部分的元素触发 hasLayout （即默认有部分元素会触发 hasLayout ，这与 BFC 基本彻底由开发者经过特定 CSS 触发并不同），这部分元素以下：

<html>, <body> <table>, <tr>, <th>, <td> <img> <hr> <input>, <button>, <select>, <textarea>, <fieldset>, <legend> <iframe>, <embed>, <object>, <applet> <marquee>

除了 IE 默认会触发 hasLayout 的元素外，Web 开发者还可使用特定的 CSS 触发元素的 hasLayout 。

经过为元素设置如下任一 CSS ，能够触发 hasLayout （即把元素的 hasLayout 属性设置为 true）。

display: inline-block 
height: (除 auto 外任何值) 
width: (除 auto 外任何值) 
float: (left 或 right) 
position: absolute 
writing-mode: tb-rl 
zoom: (除 normal 外任意值) 
min-height: (任意值) 
min-width: (任意值) 
max-height: (除 none 外任意值) 
max-width: (除 none 外任意值) 
overflow: (除 visible 外任意值，仅用于块级元素) 
overflow-x: (除 visible 外任意值，仅用于块级元素) 
overflow-y: (除visible 外任意值，仅用于块级元素) 
position: fixed复制代码

对于内联元素(能够是默认被浏览器认为是内联元素的 span 元素，也能够是设置了 display: inline 的元素)，width 和 height 只在IE5.x 下和 IE6 或更新版本的 quirks 模式下能触发元素的 hasLayout ，可是对于 IE6，若是浏览器运行于标准兼容模式下，内联元素会忽略 width 或 height 属性，因此设置 width 或 height 不能在此种状况下令该元素触发 hasLayout 。但 zoom 除了在 IE 5.0 中外，老是能触发 hasLayout 。zoom 用于设置或检索元素的缩放比例，为元素设置 zoom: 1 既能够触发元素的 hasLayout 同时不会对元素形成多余的影响。所以综合考虑浏览器之间的兼容和对元素的影响，建议使用 zoom: 1 来触发元素的 hasLayout。

6、能解决的问题

hasLayout表现出来的特性跟BFC很类似，因此能够认为是IE中的BFC。上面的规则几乎都遵循，因此上面的问题在IE里均可以经过触发hasLayout来解决。

虽然 hasLayout 也会像 BFC 那样影响着元素的尺寸和定位，但它却又不是一套完整的标准，而且因为它默认只为某些元素触发，这致使了 IE 下不少前端开发的 bugs ，触发 hasLayout 更大的意义在于解决一些 IE 下的 bugs ，而不是利用它的一些“反作用”来达到某些效果。另外因为触发 hasLayout 的元素会出现一些跟触发 BFC 的元素类似的效果，所以为了统一元素在 IE 与支持 BFC 的浏览器下的表现，Kayo 建议为触发了 BFC 的元素同时触发 hasLayout ，固然还须要考虑实际的状况，也有可能只需触发其中一个就能够达到表现统一，下面会举例介绍。

这里首先列出触发 hasLayout 元素的一些效果：

a、阻止外边距折叠

如上面例子：

<!DOCTYPE html><html lang="en">
<head>    
    <meta charset="UTF-8">    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">    
    <meta http-equiv="X-UA-Compatible" content="ie=edge">    
    <title>BFC6</title>    
    <style>         
        html,body{            
            height: 100%;        
        }        
        *{            
            padding: 0;            
            margin: 0;            
            color: #fff; 
            text-decoration: none;            
            list-style: none;            
            font-family: "微软雅黑";        
        }        
        .mg{            
            zoom: 1;        
        }        
        .rowone{            
            background: #f00; 
            height: 100px;            
            margin-bottom: 20px;        
        }        
        .rowtwo{            
            background: #090; 
            height: 100px;            
            margin-top: 20px;        
        }    
    </style>
</head>
<body>    
    <div class="mg">        
        <div class="rowone"></div>    
    </div>    
    <div class="mg">        
    <div class="rowtwo"></div>    
    </div>
</body>
</html>复制代码

须要触发.mg的layout才能解决margin重叠问题（ie7/ie6）

运行效果以下：

上面有关BFC所举的例子，在IE6/7（及其如下）中触发layout均可以解决，能够本身动手试一下，这里就不重复举例了。