中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

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，這樣也就達到了預期效果。