面试的时候尽量不讲定义，而是讲例子。
定义
- BFC全称叫做（Block Formatting Context）。中文叫块级格式化上下文
- BFC是css布局的一个概念，是一块独立的渲染区域，一个环境，里面的元素不会影响到外部的元素。
- BFC 可以简单的理解为某个元素的一个 CSS 属性，只不过这个属性不能被开发者显式的修改，拥有这个属性的元素对内部元素和外部元素会表现出一些特性，这就是BFC。
触发条件
满足下列条件之一就可触发BFC：
- 根元素，即HTML元素
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption
- position的值为absolute或fixed
布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
- BFC的区域不会与
float box重叠。 - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时，浮动元素也参与计算。
作用
- 自适应两栏布局
- 可以阻止元素被浮动元素覆盖
- 可以包含浮动元素——清除内部浮动
- 分属于不同的BFC时可以阻止margin重叠
作用细讲
阻止margin重叠
布局1.gif
上面的box：margin-bottom: 100px;下面的box：margin-top: 100px;（他们是同一侧的margin，所以会发生margin重叠的情况，两个div的距离实际上只有100px。）
如何解决：当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。
操作方法：给其中一个div外面包一个div，然后通过触发外面这个div的BFC，就可以阻止这两个div的margin重叠。
<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
<!--下面是css代码-->
.aside {
margin-bottom: 100px;//margin属性
width: 100px;
height: 150px;
background: #f66;
}
.main {
margin-top: 100px;//margin属性
height: 200px;
background: #fcc;
}
.text{
/*盒子main的外面包一个div，通过改变此div的属性使两个盒子分属于两个不同的BFC，以此来阻止margin重叠*/
overflow: hidden;//此时已经触发了BFC属性。
}
清除浮动
给父divpar加上 overflow: hidden;
清除浮动原理：触发父div的BFC属性，使下面的子div都处在父div的同一个BFC区域之内，此时已成功清除浮动。
阻止元素被浮动元素覆盖
布局2.gif
左侧的盒子向左浮动，脱离文档流。所以更大的那个盒子会覆盖更小的盒子。我要他们不覆盖要怎么做？
- 清除浮动。
- 利用BFC。加上一个
overflow: hidden，生成一个BFC，自然会清除浮动。
//利用BFC
<div class="aside"></div>
<div class="text">
<div class="main"></div>
</div>
<!--下面是css代码-->
.aside {
width: 100px;
height: 150px;
float: left;
background: #f66;
}
.main {
height: 200px;
overflow: hidden;//触发main盒子的BFC
background: #fcc;
}
.text{
width: 500px;
}
自适应两栏布局
布局3.gif
还是上面的代码，此时BFC的区域不会与float box重叠，因此会根据包含块（父div）的宽度，和aside的宽度，自适应宽度。
网友评论