css解决高度坍塌问题

解决子元素浮动造成父元素高度塌陷的问题的几种方法
一、子级方法

1 在子元素的最后添加一个高度为0的子元素，并且让它清除浮动
.clear{ clear: both; margin: 0; padding: 0;}

2.设置父元素的高度
#father {height: 600px; border:1px #000 solid; }
此种方式简单，但元素高度固定会降低扩展性

3.浮动元素后面加空div
.clear{ clear: both; margin: 0; padding: 0;}

浮动的盒子

</div素的高度

4.父级添加overflow属性
父级添加overflow属性，简单，但是有下拉列表框的场景不能用
常见值：①visible：默认值，内容不会被修剪，会呈现在盒子之外
②hidden：内容会被修剪，并且其余内容是不可见的
③scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余内容
④auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容

	#father {overflow: hidden;border:1px #000 solid; }
	     .clear:after{
 	         content: '';          /*在clear类后面添加内容为空*/
   	        display: block;      /*把添加的内容转化为块元素*/
  	        clear: both;         /*清除这个元素两边的浮动*/
	 }

父级添加伪类after，写法稍复杂，但没有副作用，推荐使用
在IE6、IE7下还需要加一句代码才能清除浮动：
注：在IE6、IE7下还需要加一句代码才能清除浮动：

	.clear{zoom：1;}/*兼容IE6、IE7浏览器*/
	 #container:after {
			content: ".";/*添加空内容*/
			display: block;;/*把添加的内容转换为块级元素*/
			height: 0;
			clear: both;/*清除这个元素两侧的浮动*/
			visibility: hidden;
	}

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

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