BFC到底是什么鬼

BFC是什么东东

了解BFC前先了解下box和formatting context

1、B：box即盒子，页面的基本构成元素。分类inline、block和inline-block三种类型的box
2、FC：formatting context是w3c规范中的一种概念。它是页面中的一块渲染区域，并且有一套算然规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。

常见的formatting context有block fomatting context(简称BFC)和inline formatting
context(简称IFC)

BFC定义：

BFC（BLOCK FORMATTING CONTEXT）
直译为“块级格式化上下文”。他是一个独立的渲染区域，只有Block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域外毫不相干

BFC布局规则：

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

哪些元素会生成BFC

1、根元素
2、float属性不为none
3、position为absolute或fixed
4、dixplay为inline-block
5、overflow不为visible