css clear属性给float带来哪些影响
2016-06-14来源:

ok, 下面举例说明下clear属性到底给float(clear常常和float结合使用)带来哪些影响:

html片段一:

代码如下:

#parentdiv

{

background: #00ff00;

}

.ret

{

width: 100px;

height: 200px;

background: #0000ff;

}

.fl

{

float: left;

}

.fr

{

float: right;

}

left

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;

}

left

right

效果:这种情况下父div的高度是200px(和子div中最高的高度一样)。

分析:

子div(#son3)使用了clear属性,这样其上外边框在float元素(#son1,#son2)下外边框的下面,因为子div#son3要占文档流,所以父div不得不增加高度来容纳子div#son3,这样也就达到了预期效果。

推荐信息
Baidu
map