什么是BFC？最直观的解读在这里

一、了解BFC

1、BFC的定义：

对于新手来说，这个解释真是。。。。

2、来个小案例，直观的体会一下吧

一个div里面嵌套了一个子元素，给子元素设置上边距，你以为的效果：

实际效果

从视觉上看，子元素的上边距变成了父元素的上边距，在实际应用时可知，父元素与子元素的左右边距不会合并，而上下边距会合并

 

 为什么浏览器会有这种奇怪的现象呢？这就是W3C制定的规则

 3、有没有解决的办法呢？

现在就是运用BFC规则的时候了

BFC块格式上下文，简单来说就是一BFC区域，根据规则，一个BFC区域和另一个BFC区域是相互独立且不会相互影响的，如下案例

给第一个BFC区域的子元素设置上下边距，根据BFC规则它不会影响其他BFC区域，于是会在内部拉开距离，这使得父元素变成独立的BFC区域。

 注意：BFC还有一个非常重要的特点，如果元素被触发了BFC规则，浏览器在计算元素高度时，会把浮动元素也考虑进去

 二、如何触发BFC规则？

 给元素添加以下属性：

 总结：

1、BFC是什么？一个浏览器渲染元素的规则（块格式上下文）

规则：各个BFC区域之间相互独立，不会相互影响

2、如何触发元素的BFC规则？

1）元素浮动：float：left/right

2）元素绝对定位: position: absolute/fixed

3）元素类型为inline-block：display: inline-block/tabl-cell等

4）overflow的值不为默认的visible：overflow:hidden/auto等

3、BFC的具体体现：

1）父子元素的上下边距不再合并

2）父元素的高度会将浮动元素计算在内