css-BFC概念

在w3c中，是这样解释block-level box的：

在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的

例如：定义三个div块元素

div{

width:100px;

height:100px;

}

.one{

background-color: #3c3c3c;

margin-bottom: 30px;

}

.two{

background-color: #1e83d3;

margin-top:30px;

margin-bottom: 30px;

}

.three{

background-color: #11a197;

margin-top:30px

}

<div class="one"></div>

<div class="two"></div>

<div class="three"></div>

会发现相邻两个div之间的margin发生了折叠；为了解决这个问题；我们就引出了BFC这个概念

 

BFC概念：

Block Formatting Contexts 块级格式化上下文，

其中Formatting Context是一个决定如何渲染文档的容器

创建的BFC元素就是一个独立的盒子，只有block-level box(块级盒子)可以创建BFC，它规定了内部的

block-level box如何布局，并且这个独立的盒子里的布局不受外部影响，它也不会影响到外面的元素

 

BFC特性：

1:内部的box会在垂直方向，从顶部开始一个接着一个地放置

2:box垂直方向的距离由margin巨鼎。属于同一个BFC的相邻box的margin会发生叠加

3:BFC的区域不会和float box叠加

4:BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素

5:计算BFC高度时；浮动元素也参与计算

 

BFC的触发：

1:设置float(left|right)除了none

2:设置overflow(hidden | auto | scroll)除了visible

3:设置display(inline-block | inline-flex | table-cell | table-caption)

4:设置position(absolute | fixed)

 

关于上面div的margin折叠现象；我们就可以使用BFC来解决了

我们可以给上面的三个div添加display:inline-block属性触发BFC；这样就不会发生折叠了

 

下面就BFC应用来说明：

先给出代码：

.d1{

width:100px;

height:100px;

background-color: #11a197;

float: left;

}

.d2{

width:300px;

height:200px;

background-color: #3c3c3c;

}

<div class="parent">

<div class="d1"></div>

<div class="d2"></div>

</div>

其中d1触发了BFC(效果自己可以在浏览器中查看);由于d1触发了BFC，d2将d1包含了；并没有达到我们想要的布局要求；那么我们可以给d2添加overflow:hidden属性来触发BFC；这样div就相邻排列了，此时的这两个盒子里的布局不受外部影响，也不会影响到外部

总结：这里只是简单的介绍了什么事BFC以及BFC的一些用处；希望能够帮助到大家