BFC(块级格式化上下文)布局特性

本文主要是介绍BFC(块级格式化上下文)布局特性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

BFC(块级格式化上下文)？

块级格式化上下文就相当于页面上一个独立的容器，容器里面子元素的变化不会影响到外面元素的排列。包括浮动外边距合并等等。这个特性的出现使我们的页面布局不会出现意外情况了。

如何创建BFC?

1 根元素(<html>)

2 元素的display属性设置为 block table list-item inline-block inline-flex table-cell table-caption flex。

3 float不为none。

4 postion为absolute或者fixed。

5 overflow不为visible。

BFC布局特性：

1 在BFC中，盒子兄顶端开始垂直一个接一个地排列

2 盒子垂直方向的距离由margin决定，同一个BFC中两个相邻盒子垂直方向的margin会发生重叠。

3 在BFC中，每个格子左外边距(margin-left)会碰触到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘）。

4 BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。

5 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

BFC用途：

(1) 清除元素内部浮动

只要把父元素设为BFC就可以清理子元素的浮动了，最常见的用法就是在父元素上设置overflow: hidden样式，对于IE6加上zoom:1就可以了。

(2) 解决外边距合并问题

主要用到盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

<div class="blue"></div>
<div class="red-outer"><div class="red-inner">red inner</div>
</div>

.blue, .red-inner {height: 50px;margin: 10px 0;
}.blue {background: blue;
}.red-outer {overflow: hidden;//创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。//或者换为display:flow-root;<div> 中的所有内容都会参与BFC，浮动的内容不会从底部溢出。
}
.red-inner{background: red;
}

属于同一个BFC的两个相邻盒子的margin会发生重叠，那么我们创建不属于同一个BFC，就不会发生margin重叠了。