描述BFC(BLOCK FORMATTING CONTEXT)及
大家好，我是IT修真院上海分院1期的Web学员刘洪利，今天给大家分享一下BFC(BLOCK FORMATTING CONTEXT)及其如何工作
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
什么是BFC
Block Formatting Context，中文直译为块级格式上下文。
BFC就是一种布局方式，在这种布局方式下，盒子们自所在的containing block顶部一个接一个垂直排列，水平方向上撑满整个宽度（除非内部盒子自己建立了新的BFC）。 两个相邻的BFC之间的距离由margin决定。在同一个BFC内部，两个垂直方向相邻的块级元素的margin会发生“塌陷”。
这里也间接指出了垂直相邻盒子margin合并的解决办法：就是给这两个盒子也创建BFC。
通俗一点，可以把BFC理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
2.知识剖析
BFC的作用
1. 清除内部浮动
我们在布局时经常会遇到这个问题：对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把把父元素变成一个BFC就行了。常用的办法是给父元素设置overflow:hidden。
2. 垂直margin合并
在CSS当中，相邻的两个盒子的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。 折叠的结果：
两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。这个同样可以利用BFC解决。
3. 创建自适应两栏布局
在很多网站中，我们常看到这样的一种结构，左图片+右文字的两栏结构。
如何创建BFC
float属性不为none
overflow不为visible(可以是hidden、scroll、auto)
position为absolute或fixed
display为inline-block、table-cell、table-caption
3.常见问题
1、Block Formatting Context可以阻止边距折叠（margin collapsing）。
2、Block Formatting Context可以包含内部元素的浮动。
3、Block Formatting Context可以阻止元素被浮动覆盖
4.解决方案
利用 clear属性，清除浮动 使父容器形成BFC
5.编码实战
.container{ margin: 30px auto; width:600px; height: 300px; clear: both; }
.p{ border:solid 3px #a33; }
.c{ width: 100px; height: 100px; background-color: #060; margin: 10px; float: left; }
.floatfix{ zoom:1; }
.floatfix:after{ content:""; display:table; clear:both; }
html部分
自适应两栏布局、
body { width: 300px; position: relative; }
.aside { width: 100px; height: 150px; float: left; background: #f66; }
.main { height: 200px; background: #fcc; }
html部分
上面中的例子我们可以看出，每个元素的margin box的左边与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此
因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。
6.扩展思考
Block Formatting Context在产生什么作用
1.Block Formatting Context可以阻止边距折叠（margin collapsing）。
2.Block Formatting Context可以包含内部元素的浮动。
其实以上的几个例子都体现了BFC布局规则第五条：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。 避免margin重叠也是这样的一个道理。
7.参考文献
参考一： Haorooms
参考二： tuicool
参考三： 前段开发博客
8.更多讨论
鸣谢
感谢大家观看
BY : 周启明 | 吴江峰 | 刘洪利
主讲人：刘洪利
IT修真院上海Web第1期学员刘洪利: 邀请码14898047
