【css3】BFC

BFC

1. 定义：

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，
只有 Block-level box 参与，它规定了内部的Block-level Box 如何布局，并且与这个区域
外部毫不相干。
布局规则：

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

2. 哪些元素会生成 BFC：

   A. 根元素
   B. float 属性不为 none
   C. position为 absolute 或 fixed
   D. display为inline-block， table-cell， table-caption， flex， inline-flex
   F. overflow 不为 visible

清除浮动

1. 父级div定义 height

原理：父级 div手动定义 height，就解决了父级 div无法自动获取到高度的问题。 简单、
代码少、容易掌握 ，但只适合高度固定的布局.

2. 结尾处加空 div标签 clear：both

原理：在浮动元素的后面添加一个空div兄弟元素，利用 css 提高的clear：both清除浮动，
让父级div能自动获取到高度 ，如果页面浮动布局多，就要增加很多空 div，让人感觉很
不好 .

3. 父级div定义 伪类：after 和 zoom

/*清除浮动代码*/
.clearfix：after{
content：""；
display：block；
visibility：hidden；
height：0；
line-height：0；
clear：both；
}
.clearfix{zoom：1}
原理：IE8以上和非 IE浏览器才支持：after，原理和方法 2有点类似，zoom(IE专有属性)
可解决ie6，ie7 浮动问题 ，推荐使用，建议定义公共类，以减少CSS 代码。

4. 父级div定义 overflow：hidden

超出盒子部分会被隐藏，不推荐使用.

5. 双伪元素法：
   .clearfix：before，.clearfix：after {
   content： ""；
   display： block；
   clear：both；
   }
   .clearfix {
   zoom： 1；}