盒模型、BFC、清除浮动

一、什么是盒模型？

	1、在HTML页面中，每一个元素都可以被看做一个盒子，
	盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成

	2、盒子模型有哪两种
	标准模式下：一个的块的总宽度（页面中占的宽度）= width + margin(左右) + 
	padding(左右) + border(左右)
	怪异模式下：一个块的总宽度= width + margin(左右)（即width已经包含padding和border）[IE浏览器]
	
	3、标准和怪异盒模型的转换
	box-sizing:content		将采用的标准模式的盒模型标准
	box-sizing:border-box	 将采用怪异模式的盒子模型标准
	box-sizing:inherit			规定应从父元素继承box-sizing 属性的值

	4、JS盒模型

	怎么获取和设置box的内容宽高
	IE ：dom.currentStyle.width/height
	非IE：window.getComputedStyle(dom).width/height

	var obj = document.getElementById("box");
	var style = null;
	if(window.getComputedStyle) {
		style = window.getComputedStyle(obj,null);	//非IE
	}else {
		style = obj.currentStyle;	//IE
	}
	alert("width=" + style.width + "\nheight=" + style.height)

二、BFC

	1、什么是BFC
		BFC就是 块级格式化上下文 的意思，BFC是一块独立的布局环境，
		保护其中内部元素不受外部影响，也不影响外部。
		本身BFC是一种css的布局方式，
		只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的
	
	2、双边距重合问题（边距重叠）
		两个box如果都设置了边距，那么在垂直方向上，
		两个box的边距会发生重叠，以绝对值大的那个为最终结果显示在页面上。
	
	3、边距重叠的情况（两种）
		（1）、父子关系的边距重叠
			父子关系，如果子元素设置了外边距，在没有把父元素变成BFC的情况下，父元素也会产生外边距
			解决方案：给父元素添加overflow:hidden,这样父元素就变成BFC，不会随子元素产生外边距
		（2）、同级兄弟关系的重叠
			同级元素在垂直方向上外边距会出现重叠情况，最后外边距的大小取两者绝对值大的那个
			解决方案：可以通过加空元素或伪类元素，设置overflow:hidden;解决margin重叠问题
		
 	4、如何触发BFC
 		在box属性值为这些情况下，都会让所属的box产生BFC
 		
 			overflow: auto/ hidden;
			position: absolute/ fixed;
			float: left/ right;
			display: inline-block/ table-cell/ table-caption/ flex/ inline-flex

	    也可以用排除法
	    	
	 		overflow的值不是visible
	 		position的值不是static或relative
	 		float的值不是none
	 		display的值是inline-block 或 table-cell 或者 flex 或者table-caption或inline-flex

	5、BFC的原理

		（1）、BFC内部的盒子，会在垂直方向，一个接一个地放置。垂直方向上也会发生边距重叠。
		（2）、BFC就是页面上的一个独立容器，容器里面的子元素不会影响到外面的元素，
		外边的也不会影响里边的。
		（3）、BFC的区域不会与float重叠。
		（4）、计算BFC的高度时，浮动元素也被计算在内。

	6、BFC的应用

		（1）、可以用来自适应布局
				利用BFC的这一个原理就可以实现两栏布局，左边定宽，
				右边自适应。不会相互影响，哪怕高度不相等。
				给right加overflow:hidden；使其变成BFC，消除外部left因浮动对他的影响
		（2）、可以清除浮动
				父元素加overflow:hidden/auto,变BFC
		（3）、解决垂直边距重叠

清除浮动（4种方式）

1、为什么要清除浮动
	清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
2、清除浮动的方法
	（1）、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签
		优点：通俗易懂，书写方便（不推荐使用）
		缺点：添加许多无意义的标签，结构化比较差
	（2）、父级添加overflow方法：可以通过触发BFC的方式，实现清除浮动效果，
	必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时，
	浏览器会自动检查浮动区域的高度
	优点：简单、代码少、浏览器支持好
	缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
	不能和position配合使用，因为超出的尺寸的会被隐藏。
	注意： 别加错位置，是给父亲加（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）
	（3）、使用after伪元素清除浮动
	（3）、使用before和after双伪元素清除浮动：（较常用推荐）