解决高度塌陷：万能清除法

逆战班

高度塌陷：当父元素不设置高度时，其他高度会随着里面的子元素的高度的变化而变化，即父元素的高度由子元素的高度撑开，达到高度自适应的目的。而当父元素的**第一级子元素都设置了浮

动**时，父元素不在计算其高度，因此就发生了高度塌陷。下面我们就写一个例子来试一下：

html的代码：

	
		"utf-8" />
		
	
		"stylesheet" type="text/css" href="css/index.css"/>
	
		
"box">
			
"box1">
			
"box2">
		
		
	

css代码：

*{
     margin: 0;padding: 0;}
html,body{
     height: 100%;}
.box{
     
	width: 500px;
	height: auto;
	margin: 0 auto;
	border: 1px solid #0f0;
	background: #0f0;
	margin-top: 50px;
}
.box .box1{
     
	width: 100px;
	height: 100px;
	background: #f00;
}
.box .box2{
     
	width: 100px;
	height: 100px;
	background: #00f;
}

这时在浏览器的效果为：

绿色背景的为父元素div，父元素的高度没有设置，完全是由子元素的高度撑开的。
红色和蓝色为其子元素div，这时我们给box1和box2都加上浮动属性，让他们在同一行显示的时候，会发生什么事情呢？

.box1,.box2{
     
	float: left;
}

这个时候我们发现box1和box2浮动之后在同一行显示了，但他们的父元素box的高度却因为消失了，绿色背景就没了，这就是所谓的高度塌陷。

这时如果我们想让父元素的高度和背景正常显示的时候，有好几种方法，都能解决高度塌陷的问题，在这里就只做万能清除法的演示了。

谁发生了高度塌陷的问题，就给他设置万能清除法
代码如下：

.box:after{
     
	content: "";
	display: block;
	clear: both;

 	height：0；
	overflow：hidden；
	visibilty：hidden；
}

这时浏览器中就能正常的显示父元素的高度了。

万能清除法中，只需要写前三个属性就能达到效果了，后三个属性主要是为了兼容一些浏览器才会添加的。

这也是我刚学到的，如果有说错的地方欢迎纠正，感谢观看~~