关键词：
一、何为BFC
块级格式化上下文（Block Formatting Context）是网页CSS视觉渲染的一部分，并用于决定盒子的布局。在定位体系中属于常规流(Normal Flow)（另外两种定位体系为浮动(Floats)和绝对定位(Absolute Positioning)）。
二、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布局中更加得心应手，也可以从根源上理解一些常见代码实现效果的原理，如清除浮动，自适应布局等。
三、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可以清除浮动了。
四、如何应用BFC
BFC的特性是很多CSS规范背后的原理，掌握这些特性，反过来应用它们就可以实现很多效果：
一、使用BFC避免外边距折叠
BFC特性2中的实例就实现了这个特性的反向应用。
二、使用BFC清除浮动
由于特性3，我们只需要用BFC包含浮动块就可以达到清除浮动影响的效果，也就是让包含浮动的父元素BFC化，这就是好几种清除浮动方法的根本原理：
1.设置父元素也浮动；
2.设置父元素的display为table(不常用)；
3.设置父元素overflow：hidden/auto；
都是让父元素BFC化，来清除对BFC外元素的影响。（下一篇博客将总结各种清除浮动的方法）
三、使用BFC避免文字环绕效果
大部分时候我们并不需要浮动带来的文字环绕效果（这个现象是由于特性1，详细解释可参考http://web.jobbole.com/83149/），用BFC来清除这个效果是个不错的选择。如下图：
我们将文字部分的包含块设置overflow：hidden就可以实现清除文环绕了。
四、多列布局与自适应布局
多列布局：
如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的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+
五、最后
本文参考了好几篇博文，原文中关于用法或原理有更详尽的解释，下面贴出地址：
张鑫旭 CSS深入理解流体特性和BFC特性下多栏自适应布局
http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
理解CSS中的块级格式化上下文
还是那句话，感谢前人栽阴！
bfc生成特性解决的问题
BFC( 块级格式化上下文 ) 块级格式化上下文，它是指一个独立的块级渲染区域， 只有 Blocklevel BOX 参与，该区域拥有一套 渲染规则来约束块级盒子的布局，且与区域外部无关. 如何生... 查看详情
blockformattingcontexts（块级格式化上下文）简称bfc的特性
如何触发BFC呢？ float除了none以外的值 overflow除了visible以外的值（hidden，auto，scroll） display(table-cell，table-caption，inline-block) position（absolute，fixed） fieldset元素 需要注意的是，display: 查看详情
bfc的特性及使用场景
BFC(BlockFormattingContext)块级格式化上下文，是Web页面CSS视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。 BFC的特性： 1.属于同一个BFC的两个相邻Box的margin会发生折叠，不同BFC不会发生折叠 2.BF... 查看详情
bfc——块级格式化上下文
BFC(块级格式化上下文)一、BFC是什么？ 从样式上看，具有BFC的容器和普通的容器没有区别。从功能上看，具有BFC的容器可以看作是隔离了的容器，容器里面的元素不会影响到外面的元素，并且B... 查看详情
块级格式化上下文
初识块级格式化上下文(BlockFormattingContexts)前言html文档中元素的定位有3种方式(普通流、绝对定位、浮动)，除普通流以外，浮动与绝对定位都会导致元素脱离普通流，按照各自的方式进行定位。带有BFC属性的容器属于... 查看详情
bfc的形成条件和特性分析
...。什么是BFCBFC（Blockformattingcontexts），翻译过来就是块级格式化上下文，指的是一种上下文环境，我们暂且不管它为什么叫这么晦涩冗长的名字，先看看哪些情况能形成BFC，然后看看它有哪些特性，这样我们也就知道它是什么 查看详情
bfc块级格式上下文
BFC块级格式上下文，独立的一个渲染区域1、同一个BFC的两个相邻盒子间的margin会重叠（垂直方向）；2、BFC内部的盒子在垂直方向上会一个接一个的放置；3、每个子元素的左外边距与包含块的左边界相接触；4、计算BFC的高度时... 查看详情
css——bfc
BFC(块级格式化上下文)BFC(Blockformattingcontext)直译为"块级格式化上下文"。元素的显示模式我们前面讲过元素的显示模式display。分为块级元素行内元素行内块元素，其实，它还有很多其他显示模式。那些元素会具有BFC的条件不是所... 查看详情
元素的bfc特性与自适应布局
...简介与基本表现。BFC全程"BlockFormattingContext",中文为"块级格式化上下文"。记住一句话：BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻雨覆雨都不会影响外部的元素。所以，避免margin穿透、清楚浮动什么的也就好理解... 查看详情
前端面试css系列——bfc
...下BFC及其应用定义BFC（BlockFormattingContext）翻译为『块级格式化上下文』。是一个独立的渲染区域，只有（Block-levelbox）块级盒子参与，BFC规定了内部盒子如何布局，以及盒子之间的关系和作用。解释说明Box(盒子)Box盒子是CSS布局... 查看详情
css
1.BFC（块级格式上下文，用于清除浮动，防止margin重叠等）块级格式上下文，是一个独立的渲染区域，并且有一定的布局规则。BFC区域不会与floatbox重叠，BFC是页面上的一个独立的容器，子元素不会影响到外面，计算BFC高度时，... 查看详情
bfc块级格式化上下文
1.定义BFC：blockformattingcontext，页面中css渲染的一个部分，主要用于“决定”盒子的布局以及浮动（相互影响的范围）的一个区域。BFC之间互不影响。2、如何产生BFC（触发BFC）2-1根元素2-2float值不为none的时候2-3position值为absolute或... 查看详情
bfc块级格式化上下文(代码片段)
块级格式化上下文（BlockFromattingContext）是按照块级盒子布局的。BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的... 查看详情
bfc块级格式化上下文(代码片段)
....com/libin-1/p/7098468.html 在一个Web页面的CSS渲染中，块级格式化上下文 (BlockFromattingContext)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks,table-cells,和table-c 查看详情
bfc的基础理解及应用场景(代码片段)
...些理解。BFC的概念： BFC即（BlockFormattingContext）块级格式化上下文，指一个独立的块级渲染区域，只有块级盒子（box）参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。 与之对应的还有IFC... 查看详情
第八篇css(代码片段)
...流内的块级元素和行内元素的布局方式不同布局方式用FC格式化上下文来命名1、块级格式化上下文【BFC】2、内联格式化上下文3、层叠格式化上下文4、灵活格式化上下文块级格式化上下文BFC什么是BFC1、BFC又叫块及格式化上下文2... 查看详情
css中的bfc解析
CSS的BFC BFC即块级格式上下文（BlockFormattingContext），它是指一个独立的块级渲染区域，只有block-level的box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。BFC的生成 CSS2.1规定满足一下条件之一就会生... 查看详情
css布局的各种fc简单介绍：bfc，ifc，gfc，ffc
什么是FC？FormattingContext，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。BFC什么是BFCBlockFormattingContext，块级格式化上下文，一个独立的块级渲染区... 查看详情