web前端浮动塌陷

浮动塌陷概念：
1，在文档流中，父元素的高度是默认被子元素撑开的。也就是说子元素多高父元素多高。
2，但是当为子元素设置为浮动是，子元素会完全脱离文档流，此时会导致子元素无法撑开父元素高度，导致父元素高度塌陷。
3，由于父元素高塌陷，则父元素下的所有元素便都会向上移，导致布局混乱。

解决塌陷的方法：
1，为浮动元素的上级（即所说的父元素）添加高度
副作用：父元素无法自适应子元素的高度。
2，BFC(Black Formatting Context):块级格式化上下文
概念：根据W3C的标准，在页面中元素都存在一个隐藏属性即（BFC），该属性可以打开或者关闭，默认为关闭。
开启BFC特征：
（1）父元素的垂直外边距不会和子元素重叠
（2）开启BFC的元素不会被浮动元素所覆盖
（3）开启BFC的元素可以包含浮动的子元素
开启BFC特征的方法：
（1）设置元素浮动
（2）设置元素绝对定位
-----------设置这两种方式开启，虽然可以撑开父元素，但会导致父元素的宽度丢失，而且这种方式会导致下边的元素上移，不能解决问题
（3）设置元素为inline-block
-----------可以解决问题，但会导致宽度，不推荐使用。
（4）将元素的overflow设置为一个非visible的值
------------推荐方式：将overflow的值设置为hidden是副作用最小开启BFC的方式
弊端：不适用于IE6及以下浏览器，不支持BFC。
兼容方法：zoom：1；隐藏属性：（hasLayout）
3 ，clear：both（清除对其影响最大的浮动元素）
清除左右浮动，会导致两个div之间的margin值失效，多用于兄弟元素。
4，隔墙法：
在中间一个空盒子，然后给那个空盒子clear：both；这样加了一堵墙之后，第二个div就能掉下来并且不干扰了上面的元素。而且第二个div还是能通过magin-top调节两个div（“墙体”div不要算进去）之间的间距，所以隔墙法作为一个新的套路沿传开来。
5，隔墙法进化版—内墙法
使用伪类选择器：after

.clearfix:after{
	/*添加一个内容*/
	content:"";
	/*装换为一个块级元素*/
	display:block;
	/*清除两侧的浮动*/
	clear: both;
}
/*兼容IE6*/.clearfix{
zoom:1
}
/*使用属性选择器进行选择清除塌陷的元素*/