CSS中块级格式化上下文（BFC）的特性与应用

1、何为BFC

块级格式化上下文（Block Formatting Context）是网页CSS视觉渲染的一部分，并用于决定盒子的布局。在定位体系中属于常规流(Normal Flow)（另外两种定位体系为浮动(Floats)和绝对定位(Absolute Positioning)）。

2、BFC如何造成

BFC的造成，根据W3C所言：

浮动、绝对定位元素（position 为 absolute 或 fixed）、行内块元素 display:inline-block、表格单元格display:table-cell、表格标题 display:table-caption 以及 overflow 属性值不为 visible 的元素（除了该值被传播到视点 viewport 的状况）将建立一个新的块级格式化上下文。

通俗理解的话，一个BFC元素至少知足一下条件中的一个：

1.float的值不为none

2.position的值不为static或relative

3.display的值为table-cell、table-caption、inline-block、flex或inline-flex

4.overflow的值不为visiable

知足以上条件的元素将有BFC元素的一些特性，理解并掌握这些特性可让你在CSS布局中更加驾轻就熟，也能够从根源上理解一些常见代码实现效果的原理，如清除浮动，自适应布局等。

3、BFC有什么特性

1.BFC中盒子对齐

W3C规范中写到：

在BFC上下文中，每一个盒子的左外侧紧贴包含块的左侧（从右到左的格式里，则为盒子右外侧紧贴包含块右侧），甚至有浮动也是如此（尽管盒子里的行盒子 Line Box 可能因为浮动而变窄），除非盒子建立了一个新的BFC（在这种状况下盒子自己可能因为浮动而变窄）。

如图所示，全部BFC的盒子都会遵循左对齐的的对齐方式。

2.关于外边距折叠

你们应该知道，标准文档流的同胞元素在竖直方向上会发生外边距折叠的现象，以下图

A的下边距为100px，B的上边距为50px，发生外边距折叠后A、B竖直间距为50xp。（更多外边距折叠问题后面会有博客专题）

一个BFC盒子与它的子元素之间不会发生外边距折叠。可是同一个BFC盒子内部的子元素之间也是会发生外边距折叠的，以下图：

可若是为其中一个子元素建立一个新的BFC（不一样于父元素那个BFC盒子），让这些子元素分属于不一样的BFC，他们之间就不会发生外边距折叠了，以下图：

HTML为：

<div class="container">
    <p>Sibling 1</p>
    <p>Sibling 2</p>
    <div class="newBFC">
        <p>Sibling 3</p>
    </div>
</div>

CSS为：

.container {
    background-color: red;
    overflow: hidden; /* creates a block formatting context */
}
p {
    margin: 10px 0;
    background-color: lightgreen;
}
.newBFC {
    overflow: hidden;  /* creates new block formatting context */
}

3.BFC内外元素互不影响

这条通俗来说就是：不管BFC内部元素如何布局——浮动、绝对定位或是其余，都不会对BFC盒子外的其余盒子的布局形成影响，同时，外部元素也不会影响BFC内部元素的布局。这个特性用途很广，也解释了为什么BFC能够清除浮动了。

4、如何应用BFC

BFC的特性是不少CSS规范背后的原理，掌握这些特性，反过来应用它们就能够实现不少效果：

1、使用BFC避免外边距折叠

BFC特性2中的实例就实现了这个特性的反向应用。

2、使用BFC清除浮动

因为特性3，咱们只须要用BFC包含浮动块就能够达到清除浮动影响的效果，也就是让包含浮动的父元素BFC化，这就是好几种清除浮动方法的根本原理：

1.设置父元素也浮动；

2.设置父元素的display为table(不经常使用)；

3.设置父元素overflow：hidden/auto；

都是让父元素BFC化，来清除对BFC外元素的影响。（下一篇博客将总结各类清除浮动的方法）

3、使用BFC避免文字环绕效果

大部分时候咱们并不须要浮动带来的文字环绕效果（这个现象是因为特性1，详细解释可参考http://web.jobbole.com/83149/），用BFC来清除这个效果是个不错的选择。以下图：

咱们将文字部分的包含块设置overflow：hidden就能够实现清除文环绕了。

4、多列布局与自适应布局

多列布局：

若是咱们建立一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这多是由于浏览器四舍五入了列宽从而全部列的总宽度会超出容器。但若是咱们在多列布局中的最后一列里建立一个新的BFC，它将老是占据其余列先占位完毕后剩下的空间。（对于多列布局这不必定是个好办法，在实际应用中更推荐使用弹性盒子或者用最后一个盒子margin负值来解决。）

自适应布局：

相似应用三的例子中，若是设置右边浮动元素margin-right（或左边BFC元素margin-left）为必定值，就实现了左右两列的自适应布局，不管左右两部分width怎么变化，均可以保持很好的布局情况而不会乱掉，这种状况下BFC的设置方法能够是：

1.overflow：auto/hidden;   IE7+

2.display:inline-block;   IE6/IE7

3.display:table-cell;     IE8+

5、最后

本文参考了好几篇博文，原文中关于用法或原理有更详尽的解释，下面贴出地址：

张鑫旭 CSS深刻理解流体特性和BFC特性下多栏自适应布局

http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/

理解CSS中的块级格式化上下文

http://web.jobbole.com/83149/

仍是那句话，感谢前人栽阴！