css之理解BFC

对一个元素设置css，首先需要知道这个元素是block还是inline类型。而BFC（Block Formatting Context）就是用来格式化块级盒子，同样管理inline类型的盒子还有IFC，以及其他的FC。

Box：块级元素，css中块级元素会独占一行，常用块级元素主要有：

• div：最常用来布局的块级元素，没有任何语义。
• p：用来描述段落。一般不用来做容器，里面只放文字，图片和表单元素。
• ul,li,ol,li,dl,dt,dd
• h1~h6
• table
• form

Formatting Context

• 指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。

BFC：

• 块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

  BFC生成：

  BFC元素特性表现原则就是，内部子元素再怎么捣蛋都不会影响外部的元素。所以可以用来清除浮动，避免margin穿透
  CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC。

• float的值不为none；
• overflow的值不为visible；
• display的值为inline-block、table-cell、table-caption；
• position的值为absolute或fixed；

• 看到有人把display：table也认为可以生成BFC，其实这里的主要原因在于Table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC。

  BFC的约束规则：

• 同一个BFC下的两个相邻的box的margin会重叠。重叠和方向无关。

• 内部的box默认会按照垂直方向一个一个堆放。
• BFC区域不会与float区域重叠
• 计算BFC的高度时，浮动子元素也参与计算；这就是为什么父元素设置overflow：hidden之后会被浮动的子元素撑高的原因。

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；这就是为什么父元素float后也可以清除子元素的浮动对其他元素的影响。

  BFC在日常开发中的应用：这是重点

• 清除浮动

• 避免第一个子元素的margin-top不生效，反而让父元素生成了margin-top。
• 多栏布局