解决父元素高度塌陷

在文档流中，父元素的高度默认是被子元素的高度撑开的，即子元素有多高父元素就有多高。但是一旦子元素脱离了文档流，此时子元素就无法撑起父元素的高度，导致父元素塌陷。

解决方法一

给父元素写定一个高度值，以避免高度塌陷，但是高度一旦给定，就不能实现父元素的高度自适应子元素的高度（不推荐使用）。

解决方法二

使用BFC
根据w3c的标准，在页面中每个元素都有一个隐含的属性叫做Block Formatting Context，简称BFC。该属性可以设置打开或者关闭，默认为关闭的，开启BFC后的元素有以下属性：
1.父元素的垂直外边距不会和子元素的外边距重叠；
2.开启BFC后的元素不会被浮动元素所覆盖；
3.开启BFC后的元素可以包含浮动的子元素。

如何开启元素的BFC属性：

1.给该元素设置浮动；此时父元素的高度会被撑起，但是其宽度也会由内容的宽度决定，且会脱离文档流，父元素下面的元素会移上去。
2.设置绝对定位，效果与设置浮动类似；
3.设置元素为inline-block，此时父元素的高度被撑起，且父元素下面的内容也不会移上去，但是父元素的宽度依然变成由子元素内容的宽度决定。
4.将元素的overflow属性设置为非visible；
注意：IE6及以下版本不支持overflow属性，需要兼容IE6及以下版本，IE6中也有一个隐含的属性hasLayout，该属性与BFC属性相似，通过设置

zoom：1；

来实现，zoom表示放大的意思，后面跟着一个数值，表示放大几倍，；另外在IE6中如果给元素设置了宽度，也会默认开始hasLayout属性。

解决方法三

首先介绍一下页面中如何清除浮动
在页面中我们有时候希望清除掉其他元素浮动对当前元素的影响，这时候可以通过clear属性实现，clear可以用来清除其他元素浮动对当前元素的影响。可选值：
none（默认值）不清楚浮动；
left：清除左浮动；
right：清除右浮动；
both：清除左右两侧浮动，一般清除对它影响最大的那个元素的浮动；

直接在塌陷的父元素最后加一个空div，由于这个div并没有浮动，所以它可以撑起父元素的高度，对它清除上方浮动元素的浮动而使得它保留在浮动元素未浮动时的位置，从而撑起父元素的高度，这种方案几乎没有缺点，唯一不足的是在页面中引入了无意义的标签。

使用伪类清除浮动

通过after伪类向父元素后面添加一个空的块元素，然后对其清除浮动，其原理与在父元素后面添加空div一样，而且不会给页面添加空div，同时使用CSS样式来实现。

.clearfix:after{
	content:"";
	display:block;
	clear:both;
}
// 注意IE6 及以下不支持after伪类，依然需要使用设置hasLayout属性
.clearfix{
	zoom:1;
}