学习笔记—BFC/块级格式化上下文

Box：CSS布局基本单位，一个页面由很多Box组成，元素的类型和display属性决定了该元素的Box类型,会有不同的 formatting context容器来管理，而不同的formatting context容器有不同的渲染方式。
一共由两种Box类型分别对应两种不同的渲染方式：
①、block-level Box
display:block,list-item,table的元素，由BFC容器来管理和渲染。
②、inline-level Box
display:inline,inline-block,inline-table的元素，由IFC容器来管理和渲染。
BFC容器布局（渲染）规则：
①、内部的Box会在垂直方向一个接一个放置。
②、BFC的区域不会与float box重叠。
③、内部的Box垂直方向的距离由margin决定，属于同一个BFC容器的两个相邻Box的margin会发生重叠。
④、计算BFC的高度时，浮动元素也会参与计算。
⑤、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦是如此。
这里需要注意的是，ie8以下的浏览器是没有BFC之说的，但是有haslayout这个概念，作用与BFC有很多相似之处，所以为了兼容早期的浏览器，在设置一个BFC容器时，要同时触发haslayout，haslayout的相关概念就不多赘述了，基本不需要了解它的概念，想要深入了解的童鞋们请自行查资料。
怎么使一个Box成为BFC容器？
根元素本来就是一个BFC容器，无需设置。
float属性不为none.
display属性为以下的值：inline-bllock，table-cell,table-caption,flex,inline-flex.
overflow：hidden.
设置这些属性中的一个，能够使一个Box成为BFC容器，但是BFC容器不会管理该Box，只会管理它的子Box。
触发元素的haslayout?
float属性为left或者fight.
display:inline-block。
…
zoom:1(只要不为normal）.

所以在使一个元素能被浮动子元素撑开且兼容早期浏览器，这样设置为最佳：
#box{
overflow:hidden;
zoom:1;
}