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