何为BFC？

何为BFC？

BFC(Block Formatting Context)，简单讲，它是提供了一个独立布局的环境，内部不会影响外部布局，反之亦然，每个BFC都遵守同一套布局规则。

如何创建BFC？

• float：left|right
• position：absolute|fixed
• display: table-cell|table-caption|inline-block｜flex | inline-flex
• overflow: hidden|scroll|auto

BFC有何特性？

1. 内部的Box会在垂直方向，从顶部开始一个接一个地放置。 2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生叠加
2. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
3. BFC的区域不会与float box叠加。
4. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
5. 计算BFC的高度时，浮动元素也参与计算。

关于BFC的应用会留到下一篇。

http://www.w3.org/TR/CSS21/visuren.html#block-formatting

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context