高度塌陷问题：
在文档流中，父元素的高度默认是被子元素撑开的；也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流；这是将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷了，则父元素下面的元素都会向上移动，这样将会导致页面布局混乱。
解决方案1之开启BFC：
可以将父元素的高度写死，但父元素的高度将不能自动适应于子元素的高度。不推荐。
根据w3c的标准，在页面中元素都有一个隐含的属性叫做Block Formatting Context；简称BFC，该属性可以设置打开或者关闭；默认是关闭的。
开启元素的BFC后，元素将会具有如下特性：
- 父元素的垂直外边距不会和子元素垂直。
- 开启BFC的元素不会被浮动元素所覆盖。
- 开启BFC的元素可以包含浮动的子元素。
如何开启元素BFC：
- 设置元素浮动；这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失。而且使用这种方式也会导致下边的元素上移，不能解决问题。
- 设置元素决定定位
- 设置元素为inline-block；可以解决问题但是会导致宽度丢失。
- 将元素的overflow设置为一个非Visible的值。设置为hidden是副作用比较小的开启BFC的方式。
在IE6及以下的浏览器中并不支持BFC，上移使用这种方式不能兼容IE6，IE6中另外有一个隐含的属性叫haslayout，该属性的作用和BFC类似，开启方式直接将元素的zoom设置为1即可。
解决方案2之清除浮动：
有时我们希望清除掉其他元素浮动对当前元素的影响，这时可以使用clear来完成功能。
clear可以用来清除其他浮动元素对当前元素的影响。清除其他元素对当前元素的影响后，元素会回到其他元素浮动之前的位置。（相当于其他元素没有移动）。
可选值：
- none：默认值，不清除浮动。
- left：清除左侧浮动元素对当前元素的影响。
- right：清除右侧浮动元素对当前元素的影响。
- both：清除两侧元素中对当前元素影响最大的影响。
所以我们可以得到一个新的解决高度塌陷的方案：直接在高度塌陷的父元素的最后，添加一个空白的div；由于这个div并没有浮动，所以它是可以撑开父元素的高度的。然后对其进行清除浮动的影响；这样可以通过这个空白的div来撑开父元素的高度。但这会使得在页面中添加一个多余的元素；并且这并不是用纯CSS解决问题，需要用到HTML。
最好的解决方案是：通过after伪类向元素后面添加一个空白的块元素，然后对其清除浮动的影响。只有那个和添加一个div的原理一样，可以达到一个相同的效果。并且不会在页面中添加多余的div。是用纯CSS解决问题；几乎没有副作用。
例样代码如下：
.clearfix:after{
content:""; /*添加一个空白内容*/
display: block; /*转换为块元素*/
clear: both; /*清除两侧影响最大的浮动*/
}
这样对于存在高度塌陷问题的元素直接添加一个类名clearfix即可。但是IE6中不支持after伪类，所以如果需要兼容IE6需要多写一个haslayout来处理。