今日在学习float属性时，发现多个元素浮动发生塌陷问题，其原因是因为使用float的元素脱离了普通元素的默认属性。以下附上代码：
<style type="text/css">
.test{
width:100px;
height:30px;
background:#000;
border:black solid 1px;
float:left;
}
.fa{
width:500px;
height:100px;
background:#fff ;
border:black solid 1px;
}
</style>
<div class="fa">
<div class="test">1</div>
<div class="test">1</div>
<div class="test">1</div>
</div>
上述代码会出现的情况是：fa被三个test挤在页面顶端，且高度不能显示（塌陷）。此问题的解决办法有：1.给子div添加overflow属性,overflow属性的作用是防止块级元素内容溢出，将元素内溢出部分砍断。此属性需要配合zoom使用。
2.给父元素添加同样的浮动属性，则可解决一行内元素溢出问题。所在该行下再添加一个块级元素。则也会发生塌陷。前一行内容会将下一行内容上半部分遮蔽。此派生问题的解决方法是在附近元素(bro)的样式表中添加clear属性，此属性的作用是消除之前设置的浮动属性的影响。
调整后的代码：
<style type="text/css">
.test{
width:100px;
height:30px;
background:#000;
border:black solid 1px;
float:left;
}
.fa{
width:500px;
height:100px;
background:#fff ;
border:black solid 1px;
float:left;
}
.bro{
height:100px;
width:100px;
background:red;
clear:both;
}
</style>
<div class="fa">
<div class="test">1</div>
<div class="test">2</div>
<div class="test">3</div>
</div>
<div class="bro "></div>
