# BFC神奇背后的原理-文摘

原文：<http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html>

#### BFC布局规则：

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

简书上也有一篇介绍BFC作用的文章，写的也不错，<https://www.jianshu.com/p/682ae6476a14>

#### 建立一个BFC最好的方法使用`overflow:hidden`

## 参考

* [BFC官网](https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context)