ok, 下面举例说明下clear属性到底给float(clear常常和float结合使用)带来哪些影响:
html片段一:
代码如下:
#parentdiv
{
background: #00ff00;
}
.ret
{
width: 100px;
height: 200px;
background: #0000ff;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
效果:由于float导致两个子div(#son1, #son2)不占文档流,所以虽然两个子div的高为200px,但是父div#parentdiv的高度是0px。
问题:有时候我们需要父div的高度正好容纳下所有的子div。在这种情况下我们可以使用clear属性了。
html片段二:在html片段一的基础上添加css class:clear,给父div添加个子div(#son3)
代码如下:
#parentdiv
{
background: #00ff00;
}
.ret
{
width: 100px;
height: 200px;
background: #0000ff;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
.clear
{
clear: both;
}
效果:这种情况下父div的高度是200px(和子div中最高的高度一样)。
分析:
子div(#son3)使用了clear属性,这样其上外边框在float元素(#son1,#son2)下外边框的下面,因为子div#son3要占文档流,所以父div不得不增加高度来容纳子div#son3,这样也就达到了预期效果。