1、在文档流中，父元素的高度默认是被子元素撑开的，当子元素浮动以后，子元素脱离文档流，此时将导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
2、由于父元素塌陷，则父元素下的所有元素向上移动，导致页面布局混乱。
3、根据w3c的标准，页面中元素都有一个隐含的属性叫Block Formatting Context简称BFC（IE6及以下版本不支持），该属性可以设置打开或关闭，默认为关闭，当开启以后，元素将会具有以下特性：
①父元素的垂直外边距不会和子元素重叠
②开启BFC的元素不会被浮动元素所覆盖
③开启BFC的元素可以包含浮动的子元素
4、开启方式：
①设置元素浮动
--虽然可以撑开父元素，但父元素宽度丢失，下边的元素会上移。
②设置元素绝对定位
--同上
③设置元素为inline-block
--可以撑开，父元素宽度丢失
④将元素的overflow设置为一个非visible的值（使用hidden较好）
⑤ie6及以下使用hasLayout，即将元素的zoom设置为1即可。
--zoom表示放大，后边跟数值表示放大几倍
--zoom:1表示不放大，但是该样式可以开启hasLayout
--zoom只有ie支持。
5、解决办法
①可以将父元素高度写死，但此时父元素的高度将不能自动适应子元素的高度（不推荐）。
②使用clear（推荐，但是添加了多余的结构）
---clear属性可以用于清除元素周围的浮动对元素的影响
---也就是元素不会因为上方出现了浮动元素而改变位置
---可选值：
– left：忽略左侧浮动
– right：忽略右侧浮动
– both：忽略全部浮动（影响最大的那个）
– none：不忽略浮动，默认值
具体步骤：
可以在高度塌陷的父元素的最后添加一个空白的div，由于这个div并没有浮动，所以它可以撑开父元素的高度，然后对其进行清除浮动，这样可以通过这个空白的div来撑开其父元素的高度，基本没副作用
③通过CSS伪类after（原理与②相同，但是没使用div，同时ie6不支持）
.box1:after{
context:"";/*添加内容为空*/
display:block;/*转换块元素*/
clear:both;/*清除浮动*/
}
