[Css]如何解决float浮动塌陷

今日在学习float属性时，发现多个元素浮动发生塌陷问题，其原因是因为使用float的元素脱离了普通元素的默认属性。以下附上代码：

---

.test{

width:100px;

height:30px;

background:#000;

border:black  solid  1px;

float:left;

}

.fa{

width:500px;

height:100px;

background:#fff ;

border:black  solid  1px;

}

     

1

     

1

     

1

---

上述代码会出现的情况是：fa被三个test挤在页面顶端，且高度不能显示（塌陷）。此问题的解决办法有：1.给子div添加overflow属性,overflow属性的作用是防止块级元素内容溢出，将元素内溢出部分砍断。此属性需要配合zoom使用。

2.给父元素添加同样的浮动属性，则可解决一行内元素溢出问题。所在该行下再添加一个块级元素。则也会发生塌陷。前一行内容会将下一行内容上半部分遮蔽。此派生问题的解决方法是在附近元素(bro)的样式表中添加clear属性，此属性的作用是消除之前设置的浮动属性的影响。

---

调整后的代码：

.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;

}

     

1

     

2

     

3