BFC

转载地址：深入理解BFC与边距折叠

转载地址：理解CSS中的BFC

是什么

BFC（Block Formatting Context）是web页面中盒模型布局的CSS渲染模式。

属于常规文档流。

通俗理解：

是一个独立的布局环境，可以理解为一个箱子，里面物品的摆放不受外界的影响。

一个BFC中，块盒子与行盒子都垂直的沿着父元素的边框排列。

BFC中，行盒子与块盒子的左外边缘margin-left会碰到容器的左边缘border-left（从左到右时）。

创建：

当一个元素的CSS样式为：

1.浮动

2.绝对定位元素

3.display:inline-block/table-cells,table-captions

4.overflow!=visible

中的任意一个时，一个BFC被创建。

常见应用场景：

1.取消文字环绕图片

2.合并外边距：折叠条件：margin相邻接。

   相邻接是指：处于常规文档流中（非float与absolute）的块级盒子，并处于同一个BFC中。