CSS clear屬性給float帶來哪些影響
發(fā)布時間：2014-05-13 09:39:38 作者：佚名 
我要評論
我要評論CSS clear屬性相信大家都有所耳聞吧，下面舉例說明下clear屬性到底給float（clear常常和float結(jié)合使用）帶來哪些影響
關(guān)于clear屬性的定義參考：W3School 在閱讀W3School相關(guān)內(nèi)容時一定要認(rèn)真，認(rèn)真，仔細(xì)，仔細(xì)閱讀“說明”部分：“如果聲明為左邊或右邊清除，會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下”。
Ok， 下面舉例說明下clear屬性到底給float（clear常常和float結(jié)合使用）帶來哪些影響：
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導(dǎo)致兩個子DIV(#son1, #son2)不占文檔流，所以雖然兩個子DIV的高為200PX，但是父DIV#parentDiv的高度是0PX。
問題：有時候我們需要父DIV的高度正好容納下所有的子DIV。在這種情況下我們可以使用clear屬性了。
HTML片段二：在HTML片段一的基礎(chǔ)上添加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）下外邊框的下面，因?yàn)樽覦IV#son3要占文檔流，所以父DIV不得不增加高度來容納子DIV#son3，這樣也就達(dá)到了預(yù)期效果。
Ok， 下面舉例說明下clear屬性到底給float（clear常常和float結(jié)合使用）帶來哪些影響：
HTML片段一：
復(fù)制代碼
代碼如下:#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導(dǎo)致兩個子DIV(#son1, #son2)不占文檔流，所以雖然兩個子DIV的高為200PX，但是父DIV#parentDiv的高度是0PX。
問題：有時候我們需要父DIV的高度正好容納下所有的子DIV。在這種情況下我們可以使用clear屬性了。
HTML片段二：在HTML片段一的基礎(chǔ)上添加CSS class：clear，給父DIV添加個子DIV（#son3）
復(fù)制代碼
代碼如下:#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）下外邊框的下面，因?yàn)樽覦IV#son3要占文檔流，所以父DIV不得不增加高度來容納子DIV#son3，這樣也就達(dá)到了預(yù)期效果。
相關(guān)文章
- 本文主要介紹了css中float的用法，以及網(wǎng)頁中常用的幾種布局方式。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-10
- 本篇文章主要介紹了css中Float屬性， 顧名思義,就是讓設(shè)置的標(biāo)簽產(chǎn)生浮動效果,就是脫離原來頁面的標(biāo)準(zhǔn)輸出流。2016-12-21
CSS重要屬性之float學(xué)習(xí)心得(分享)
下面小編就為大家?guī)硪黄狢SS重要屬性之float學(xué)習(xí)心得(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-18css(display,float,position)深入理解
下面小編就為大家?guī)硪黄猚ss(display,float,position)深入理解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-17- 下面小編就為大家?guī)硪黄仙Ｕ刢ss中float的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-07-18
CSS使用float屬性設(shè)置浮動元素的實(shí)例教程
這篇文章主要介紹了CSS使用float屬性設(shè)置浮動元素的實(shí)例教程,包括使用overflow清除浮動的方法,需要的朋友可以參考下2016-07-07- 下面小編就為大家?guī)硪黄狢SS基礎(chǔ)知識之float詳解。小編覺得挺不錯的， 現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-12
- 本文針對CSS浮動float、定位position進(jìn)行學(xué)習(xí)理解，通過實(shí)例幫助大家掌握CSS浮動float、定位position技巧，感興趣的小伙伴們可以參考一下2016-04-21
CSS之float在IE瀏覽器下?lián)Q行問題解決方法
a標(biāo)簽float在IE等瀏覽器下?lián)Q行的情況想必大家都有遇到過吧，解決方法很簡單，就是把a(bǔ)標(biāo)簽放在文本前面，下面是具體的示例，需要的朋友了解下2014-04-17- 這篇文章主要介紹了css浮動(float/clear)使用方法，如果你理解CSS盒子模型，但對于浮動不理解，那么這篇文章可以幫助你2014-03-14