CSS盒模型、边距重叠及BFC

css盒模型：
标准盒模型 浏览器默认
怪异盒模型

css盒模型区别:
标准盒模型 width = 内容宽度
怪异盒模型 width = 内容宽度 + padding + border

css盒模型设置：
标准盒模型 box-sizing:content-box;
怪异盒模型 box-sizing:border-box;

JS设置/获取盒模型对应宽高：

1. dom.style.width/height
   缺点：仅适用于有内联样式的
2. dom.currentStyle.width/height
   优点：获取渲染之后的运行的结果，相对更准确
   缺点：只有IE浏览器支持
3. window.getComputedStyle(dom).width/height
   优点：原理和2相同，但兼容性更好
4. dom.getBoundingClientRect().width/height
   原理同上，经常用于计算元素的绝对位置（根据视窗左顶点获得），getBoundingClientRect()方法可获得四个值：left/top/width/height

根据盒模型解释边距重叠：
父子元素、兄弟元素，当有外边距时，会取其中一个边距的最大值，作为实际的边距。
空元素的有上下边距时，也会取其中更大的一个边距值，作为实际的边距。
这就是边距重叠。

BFC：
概念：块级格式化上下文
原理：

1. 在BFC这个元素垂直方向的边距会发生重叠
2. BFC的区域不会与浮动元素的box重叠
3. BFC在页面上是一个独立的容器，其里外的元素不会互相影响
4. 计算BFC高度时，浮动元素也会参与计算

创建BFC的方法:

1. float值不为none
2. position值不为static和absolute
3. display属性为table/table-cell等与table相关的值
4. overflow值不为visible

BFC使用场景:

<!-- 1. BFC不与float重叠 -->
<!-- 此时，left元素浮动，right元素会与left元素重叠，此时可为right元素创建BFC -->
<section id="layout">
	<style>
		#layout{
			background:red;
		}
		#layout .left{
			float:left;
			width:100px;
			height:100px;
			background:yellow;
		}
		#layout .right{
			height:110px;
			background:gray;
			overflow:auto; /*为元素创建BFC*/
		}
	</style>
	<div class="left"></div>
	<div class="right"></div>
</section>

<!-- 2.BFC子元素即使是float，也会参与高度计算 -->
<!-- 此时，div元素浮动，显示的效果是父元素的背景红色不会显示出来，此时父元素的高度为0，可为父元素创建BFC -->
<section id="float">
	<style>
		#float{
			background:red;
			overflow:auto; /*为父元素创建BFC*/
			/*float:left; *//*为父元素创建BFC*/
		}
		.float{
			float:left;
			font-size:30px;
		}
	</style>
	<div class="float">我是浮动元素</div>
</section>