首先让我复习一下块级元素（block）和内联元素（inline）
块元素(block)的特点：
- block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。
- block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。
- block元素可以设置margin和padding属性。
内联元素(inline)的特点：
- inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- inline元素设置width,height属性无效。
- inline元素的margin和padding属性，水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
BFC是什么？
那么什么是bfc呢，翻译一下叫Block Formatting Context，Block就是块级元素，Formatting Context是一个抽象的概念，它指的是页面中一个渲染区域，并拥有一套渲染规则，它决定了在区域中的子元素如何定位和其他元素的相互关系和作用，那么显然BFC的意思就是一个针对block元素的规则区域（越接触代码越觉得自己是在创造世界，那么BFC就是一个为block元素创造的世界，这个世界有一套规则在规定它的行为）
BFC中的渲染规则？
- block元素在垂直方向上一个个排列，每个元素的左外边距与包含块的左边界相接触；
- block元素垂直方向上的margin会重叠。（完整的说法是：属于同一个BFC的俩个相邻的块级元素的margin会发生重叠，与方向无关，但是因为block元素独占一行，它们的左右margin没有机会重叠。）
- BFC区域不会与浮动元素重叠，计算BFC区域高度的时候会把浮动元素的高度计算在内（这是over-flow：hidden清除浮动的原理）
- BFC作为一个独立的渲染区域，容器里面的元素不会影响外面，外面的元素也不会影响里面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> html * { margin: 0; padding: 0; } body{ margin: 20px; border:1px solid } div { margin: 20px 0; height: 20px; background: red; } </style> <body> <div>我是block元素</div> <div>我是block元素</div> <div>我是block元素</div> <div>我是block元素</div> </body> </html>
让我们举个栗子，一开始我无法理解我什么都没做，怎么页面就呈现了BFC规则下的状态，原来我们的根元素html就是一个BFC区域，而body元素则作为包含块存在，如上就可以很清晰的看到div在垂直方向上一个个排列，并且左边界与包含块body的左边界相接触，它们之间的margin重叠，只有20px；
现在来验证一下html是不是一个BFC区域和规则的第三条，我们将div设为float：left；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <style> html * { margin: 0; padding: 0; } div { float: left; height: 20px; background: red; } </style> <body> <div>我是float元素</div> </body> </html>
可以看出html的高度和浮动元素div的高度一致都是20px；而包含块body作为一个html-BFC中的普通block元素，高度为0；
那么除了html根元素，我们可以手动设置某一个元素为BFC么，答案是肯定的
创建BFC
- float的值不为none
- overflow的值不为visible
- display的值为inline-block、table-cell、table-caption（display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-ccell生成了BFC）
- position的值为absolute或fixed
- fieldset元素
好，那我就顺便再来复习一下这些属性
- float的值有left，right，none；所以一个元素只要浮动起来了，那就会创建BFC区域；这里要注意的是position:absolute和float会隐式的改变display类型，变为display:inline-block，可以设置长宽，默认宽度并不占满父元素，就算是显示的设置display:inline或display:block，也没有效果（因为下文display：inline-block也可以创建BFC，难道是因为float改变元素display后导致创建的BFC，此为推测）。
- overflow的值有visible、hidden、scroll、auto；这个属性主要规定内容溢出元素框时发生的事情；这里注意的是我们往往设置overflow：hidden来清除浮动，因为其他scroll和auto虽然也会创建BFC区域，但是会出现滚动条
- display的值inline-block内联块状元素、table-cell表格单元格，类似<td><th>、table-caption表格标题,类似<caption>
- position的值有absolute、relative、fixed、static；absolute绝对定位，相对于第一个定位的父元素定位；relative相对定位，相对与自身定位；并不脱离文档流；fixed相对于视口定位
- fieldset元素，用的比较少，一般用来给表单画框
BFC的作用
网上举例的BFC作用比如清除浮动、消除margin重叠、布局等等我就不多赘述了，但是我总感觉这只是利用BFC的特性做一些小事，杀鸡用牛刀，事实上BFC并没有具体的作用，它是一套渲染的规则，而理解这些规则可以帮助我们更好的使用CSS，对CSS有一种宏观的掌控，而解决具体的问题就交给具体的属性去做吧！
参考文章
http://www.cnblogs.com/dojo-lzz/p/3999013.html#undefined
https://www.jianshu.com/p/76484dff1cb5
http://www.360doc.com/content/16/0229/16/19812575_538294774.shtml
http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120133584314892/
