BFC机制

Posted 2020-09-27 询询

BFC全称是Block Formatting Context，即块格式化上下文。它是CSS2.1规范定义的，关于CSS渲染定位的一个概念。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置；
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠；
3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。；
4. BFC的区域不会与float box重叠，常用来清除浮动和布局。；
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。；
6. 计算BFC的高度时，浮动元素也参与计算；

会生成BFC的元素：

• 根元素或其它包含它的元素；
• 浮动 (元素的float不为none)；
• 绝对定位元素 (元素的position为absolute或fixed)；
• 行内块inline-blocks(元素的 display: inline-block)；
• 表格单元格(元素的display: table-cell，html表格单元格默认属性)；
• overflow的值不为visible的元素；
• 弹性盒 flex boxes (元素的display: flex或inline-flex)；

BFC的范围：

BFC的范围在MDN中是这样描述的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

中文的意思一个BFC包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。

插入一段代码方便理解

 1 <div class=\'div_1 BFC\'>
 2     <div class=\'div_2\'>
 3         <div class=\'div_3\'></div>
 4         <div class=\'div_4\'></div>
 5     </div>
 6     <div class=\'div_5 BFC\'>
 7         <div class=\'div_6\'></div>
 8         <div class=\'div_7\'></div>
 9     </div>
10 </div>

div_1创建了一个块格式上下文，这个上下文包括了div_2、div_3、div_4、div_5。即div_2中的子元素也属于div_1所创建的BFC。但由于div_5创建了新的BFC，所以div_6和div_7就被排除在外层的BFC之外。

这就代表着一个元素不能同时存在于多个BFC中。

BFC的一个最重要的效果是，让处于BFC内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。这是利用BFC清除浮动所利用的特性。

BFC的常用方式：

1.子级浮动导致父级高度塌陷

    <style type="text/css">
        .box{
            width: 900px;
            background: black;
        }
        .box1{
            height: 300px;
            width: 300px;
            background: red;
            float: left;
        }
        .box2{
            height: 300px;
            width: 300px;
            background: blue;
            float: left;
        }
    </style>
......
<div class="box">
    <div class="box1"></div>
    <div class="box2"></div>
</div>

 

上面的代码定义了3个块，一个父级包含了两个子集，但是父级的背景颜色无法显示，是因为子集元素浮动导致了父级高度的塌陷。

在为box设置BFC后，box的高度才能找回来。

从而显示出正确的样式。

2.子级margin-top将父级带下 为父级触发BFC

要将黑色块中的小红块下移一点，直接使用了margin-top，结果黑块一起下移了。

    <style type="text/css">
        .box{
            width: 300px;
            height: 300px;;
            background: black;
        }
        .box1{
            height: 100px;
            width: 100px;
            background: red;
            margin-top: 50px;
        }
    </style>
......
<div class="box">
    <div class="box1"></div>
</div>

 

而设置了BFC后，就能正确的下浮红色块

3.子级超出父级范围 为父级触发BFC以决定如何处理

当子级因为设置了样式或者父级显示范围不够而无法完整显示时，设置hidden，scroll等属性来对子级显示进行设置。