CSS中子元素浮动导致父元素高度塌陷解决方案

float的定义：

定义: float 属性定义元素浮动到左侧或右侧。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级元素，而不论它本身是何种元素。元素对象设置了float属性之后，它将不再独自占据一行。浮动块可以向左或向右移动，直到它的外边缘碰到包含它的框或另一个浮动块的边框为止。 

为什么父元素会坍塌？

这是因为内部的元素因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的父容器不会被撑开。

例子

        <style type="text/css">
		#container {
			border: 1px solid green;
		}
		.div1 {
			float: left;
			width: 100px;
			height: 100px;
		}
		.div2 {
			background: red;
		}
		.div3 {
			background: green;
		}
	</style>

       <div id="container">
		<div class="div1 div2"></div>
		<div class="div1 div3"></div>
	</div>

效果图：父元素高度塌陷了

怎么解决？

方法1：

在使用float元素的父元素最后加一个div：<div style="clear:both"></div>

        <div id="container">
		<div class="div1 div2"></div>
		<div class="div1 div3"></div>
		<div style="clear: both;"></div>
	</div>

效果如下

可以看出，父容器已经不再坍塌了

方法2：

在使用float元素的父元素添加overflow:hidden;（只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，但是IE6下不生效，所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。）

		#container {
			border: 1px solid green;
			overflow: hidden;
			zoom: 1;
		}

效果和方法1是一样的。

方法3：

使用after伪对象清除浮动

		#container:after {
			content: ".";
			display: block;
			height: 0;
			clear: both;
			visibility: hidden;
		}