BFC(Box Formatting Context)

2016-05-27 本文已影响0人狐尼克朱迪

定义

BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Box-level参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

Box：CSS布局的对象和基本单位； Formatting Context：一块渲染区域，并且有一套渲染规则

那些元素会形成BFC

根元素(body)(有误？设置html：overflow:auto; body设置:overflow:auto;)
float属性不为none
position为absoulte或者fixed
display为inline-block，table-cell，table-caption，flex，inline-flex
overflow不为visibile

BFC布局规则

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

BFC作用

对于以上的规则，我们通过例子进行剖析，总结BFC的作用：

自适应两列布局

 ```
   <style>
         body {
             width: 300px;
             position: relative;
         }
         .aside {
             width: 100px;
             height: 150px;
             float: left;
             background: #f66;
         }
         .main {
             height: 200px;
             background: #fcc;
             /*overflow: hidden;*/
         }
     </style>
     <body>
         <div class="aside">aside</div>
         <div class="main">main</div>
     </body>
 ```

效果图为：

bfc-1

参考第3条：

 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

可知main的左边框和父元素的border接触。

而依据第4条规定:

 BFC区域不会与float box重叠

我们触发main的bfc，给其设置 overflow: hidden；可以得到如下的效果：从而实现了两列布局。

bfc-2

清除内部浮动

<style>
.par {
    border: 1px solid #fcc;
    width: 100px;
    /*overflow: auto*/
}
.child {
    border: 1px solid #f66;
    width:30px;
    height: 30px;
    float: left;
}

</style>
<body>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
```

效果图为：

bfc-3

参考第6条：

    计算BFC高度时，浮动元素也要参与计算。
可知，父元素触发了bfc后，在计算父元素高度时会把浮动的子元素也计算在内，从而达到清除浮动的作用：
![bfc-4](https://img.haomeiwen.com/i1975863/a3c5e90aa1f5deba.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

防止垂直的margin重叠

    <style>
    p {
        color: #f55;
        background: #fcc;
        width: 100px;
        line-height: 20px;
        text-align:center;
        margin: 20px;
    }
    </style>
    <body style="border: 1px solid #aaa; width: 140px;">
        <p>Haha</p>
        <p>Hehe</p>
    </body>

效果为：

bfc-5

可知两个相邻的元素，其margin发生的和重叠，两者之间的距离为20px。

依据第2条：

Box垂直方向的距离由margin决定。属于一个BFC的两个相邻Box的margin会叠加

把第二个元素进行包裹，可以得到两者之间的margin扩大为两个元素margin之和：

    <style>
    p {
        color: #f55;
        background: #fcc;
        width: 100px;
        line-height: 20px;
        text-align:center;
        margin: 20px;
    }
    .wrap{overflow: hidden;}
    </style>
    <body style="border: 1px solid #aaa; width: 140px;">
        <p>Haha</p>
        <div class="wrap">
            <p>Hehe</p>
        </div>
    </body>

效果为：

bfc-6

总结

上述的几个例子，都符合第5条规则：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理

BFC(Box Formatting Context)

定义

那些元素会形成BFC

BFC布局规则

BFC作用

总结

猜你喜欢

热点阅读