CSS——float屬性及Clear:both備忘筆記

2024-07-11 08:28:27

字體：大中小

供稿：網(wǎng)友

通過指定CSS屬性float的值,從而使元素向左或向右浮動(dòng),然后由后繼元素向上移動(dòng)以填補(bǔ)前面元素的浮動(dòng)而空出的可用空間。CSS的float屬性，作用就是改變塊元素對(duì)象的默認(rèn)顯示方式，HTML標(biāo)簽設(shè)置了float屬性之后，它將不再獨(dú)自占據(jù)一行，從而可以實(shí)現(xiàn)多個(gè)元素同處一行的效果。Float的功能很強(qiáng)大，但是如果沒有好好掌握而使用很可能會(huì)成為你調(diào)試樣式的噩夢(mèng)。

使用Float樣式，如果沒有清除浮動(dòng)，那么有浮動(dòng)元素的父元素容器將無法自動(dòng)撐開。如果沒有清除內(nèi)部浮動(dòng)，此時(shí)會(huì)導(dǎo)致浮動(dòng)的父元素?zé)o法自動(dòng)撐開到本身應(yīng)有的高度。也就是說：當(dāng)一個(gè)元素是浮動(dòng)的，如果沒有關(guān)閉浮動(dòng)時(shí)，其父元素不會(huì)包含這個(gè)浮動(dòng)元素，因?yàn)榇藭r(shí)浮動(dòng)元素從文檔流中脫離。

所以需要在樣式定義的后面進(jìn)行清除浮動(dòng)，清除浮動(dòng)的方法有幾種：

Clear:both清除浮動(dòng)

clear清除浮動(dòng)主要是借用clear屬性來清除浮動(dòng)，這是一種比較陳舊的清除浮動(dòng)方法，但是感覺一般遇到這種問題都會(huì)用這種方法去清除浮動(dòng)。使用clear:both來清除浮動(dòng)，我們需要在需要清除浮動(dòng)地方的后面緊接著增加一個(gè)額外元素，比如說一個(gè)div標(biāo)簽，并且定義他們的樣式為“clear:both”,其通常使用的結(jié)構(gòu)方式如下：

復(fù)制代碼

代碼如下:
<div class="demo A">
<div class="demoB demoFloat">float left</div>
<div class="demoC demoFloat">float right</div>
<div class="demoD demoFloat">not float</div>
<div class="clear"></div>
</div>

復(fù)制代碼

代碼如下:
<pre name="code" class="css"> .clear {
clear:both;/*主要使用這個(gè)屬性來清除浮動(dòng)*/
/*為了不讓ie具有一定的空間，個(gè)人建議加上下面三個(gè)屬性*/
height: 0;
line-height: 0;
font-size: 0;
}</pre>
<pre></pre>
<p></p>
<pre></pre>
<p></p>
<h4 style="margin:0px; line-height:30px; color:rgb(81,177,72); font-family:'Microsoft Yahei'"><a name="t1"></a>
<span style="white-space:pre"></span>2.使用overflow</h4>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>用overflow方法來清除浮動(dòng)相對(duì)來說比較簡單，只需要在有浮動(dòng)的元素上面加上下面的屬性：</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> .A {
overflow: auto;
zoom: 1;/*在ＩＥ下觸發(fā)其layout，也要以使用_height:1%來代替zoom*/
}</pre><p></p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>使用overflow屬性來清除浮動(dòng)有一點(diǎn)需要注意，overflow屬性共有三個(gè)屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動(dòng)，但切記不能使用visible值，如果使用這個(gè)值將無法達(dá)到清除浮動(dòng)效果，其他兩個(gè)值都可以。</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>對(duì)于overflow屬性清滁浮動(dòng)我們還可以這樣應(yīng)用：</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> .A {
overflow: auto;/*除ＩＥ6以及其以下版本不識(shí)別之外，其他瀏覽器都識(shí)別*/
}
* html .A {
height: 1%; /* IE5-6 */
}</pre><p></p>
<h4 style="margin:0px; line-height:30px; color:rgb(81,177,72); font-family:'Microsoft Yahei'"><a name="t2"></a>
<span style="white-space:pre"></span>3.clearfix方法</h4>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>這種方法清除浮動(dòng)是現(xiàn)在網(wǎng)上最拉風(fēng)的一種清除浮動(dòng)，是利用:after和:before來在元素內(nèi)部插入兩個(gè)元素塊，從而達(dá)到清除浮動(dòng)的效果。其實(shí)現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個(gè)div.clear標(biāo)簽，而clearfix利用其偽類clear:fix在元素內(nèi)部增加一個(gè)類似于div.clear的效果。下面來看看其具體的使用方法：</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
HTML Code:</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> <div class="demo A clearfix">
<div class="demoB demoFloat">float left</div>
<div class="demoC demoFloat">float right</div>
<div class="demoD demoFloat">not float</div>
</div></pre><p></p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>使用clearfx來清除浮動(dòng)最主要掌握一點(diǎn)，需要在有浮動(dòng)元素的父元素中加入一個(gè)叫clearfix的class名稱，比如說我們這個(gè)例子，我們需要在div.A中加入一個(gè)clearfix的class名。接著在給這個(gè)clearfix加上樣式</p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
</p><pre name="code" class="css"> .clearfix:before,
.clearfix:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */</pre><p></p>
<p style="margin-top:0px; margin-bottom:9px; color:rgb(64,64,64); font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>其實(shí)只使用clearfix:after就可以達(dá)到清除浮動(dòng)的效果，但只使用clearfix:after時(shí)在跨瀏覽器兼容問題會(huì)存在一個(gè)垂直邊距疊加的bug，所以為了讓瀏覽器兼容這個(gè)clearfix的清除浮動(dòng)，在原來的基礎(chǔ)上加止clearfix:before,這樣就解決了跨瀏覽器的兼容問題。</p>
<p style="margin-top:0px; margin-bottom:9px; font-family:'Microsoft Yahei'; line-height:28px">
<span style="white-space:pre"></span>在這么多種清除浮動(dòng)的方法中，都沒有離開最原始的clear:both方法，特別是clearfix:after清除浮動(dòng)，完全就是clear:both的一種變身，區(qū)別在于不需要在html增加一個(gè)標(biāo)簽，而只需要在有浮動(dòng)元素的父元素中加上一個(gè)clearfix的class名，這樣就輕松解決了清除浮動(dòng)的問題。</p>

上一篇：element.style覆蓋樣式因優(yōu)先級(jí)順序?qū)е碌慕鉀Q方法

下一篇：CSS media queries

發(fā)表評(píng)論

共有條評(píng)論