足球游戏_中国足彩网￥体育资讯$

ok， 下面举例说明下clear属性到底给float（clear常常和float结合使用）带来哪些影响：

html片段一：

代码如下:

#parentdiv

{

background: #00ff00;

}

.ret

{

width: 100px;

height: 200px;

background: #0000ff;

}

.fl

{

float: left;

}

.fr

{

float: right;

}

<div id=parentdiv>

<div id=“son1” class=fl ret>

<h2>left</h2>

</div>

<div id=”son2 class=fr ret >

<h2>right</h2>

</div>

</div>

效果：由于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 id=parentdiv>

<div id=“son1” class=fl ret>

<h2>left</h2>

</div>

<div id=”son2 class=fr ret >

<h2>right</h2>

</div>

<div id=son3 class=“clear”>

</div>

</div>

效果：这种情况下父div的高度是200px（和子div中最高的高度一样）。

分析：

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