|
這是為什么
這里引發(fā)了一個關(guān)于 float 的有趣的行為，也正好去去好好的了解一下它。那么為什么當(dāng)我們使用一個絕對的元素它會消失，而使用浮動卻不會產(chǎn)生這樣的后果呢？
浮動的本質(zhì)就是流動，即使你可以通過下一個元素的 clear 重新控制它。位于浮動之后的元素為浮動騰出了空間（瀏覽器通常是為絕對元素增加上邊距以清除浮動）。一旦浮動元素不在了，絕對元素將回到這個頁面的正常位置。因此當(dāng)我們?yōu)楦釉卦O(shè)置一個負(fù)的 margin 之后，它將克服任何的阻礙去移動，因為它本身就是基于流動的。當(dāng)我們逐漸的移動浮動元素，一直到它消失在外邊界里，那么緊跟它的絕對元素將回到頁面中的正常位置，而不會跟隨浮動元素消失。
這是一個事實，當(dāng)浮動元素不斷的往上拉，直到消失，我們的絕對元素依然留在我們的視野之中。這可能有些難理解，但是我們可以通過一個簡單的例子去了解它。
CSS 代碼：
.float{
width:200px;
height:100px;
background:red;
float:left;
}
.top{
background:green;
height:300px;
width:100%;
}
.follow-on{
clear:both;
background:blue;
height:100px
}
HTML 代碼:
<div class="top">Top</div>
<div class="float">Float</div>
<div class="follow-on">Following content</div>
這里我們先在上邊設(shè)定了一個絕對元素，然后設(shè)置了一個浮動元素，再在浮動元素下設(shè)置了一個絕對元素。請看下圖，或者看 這個頁面 的效果。
沒有什么異常，一切都是我們所預(yù)料的那樣。
現(xiàn)在，如果我們?yōu)楦釉靥砑右粋�負(fù)的 margin：
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-100px
}
那么我們可以看到下圖的效果，或者到 這里 查看效果。
依然一切正常，如我們所預(yù)料的，但是如果我們把負(fù)的數(shù)值調(diào)整為 200 呢？
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-200px
}
如下圖，或者點擊 這里 查看效果。
正如你看到的那樣，浮動元素離開了它下邊的元素，但是浮動下邊的元素并沒有跟隨浮動，而是留在了本來屬于它的位置。這很好的解釋了我們最初的例子中將浮動元素拉離視野所出現(xiàn)的狀況。
然而，加入我們將紅色浮動元素的 float 屬性刪除，那么藍(lán)色的元素將跟隨它一起被拉入綠色元素的區(qū)域。如下圖所示，或者在 這里 查看效果。
當(dāng)一個絕對元素的邊距 margin 發(fā)生變化時，所有它后邊的絕對元素的也將發(fā)生相應(yīng)的改變。
我希望各位會對這個小技巧（雖然可能你已經(jīng)知道）感興趣，也希望你們能和我一起分享你們經(jīng)常遇到的問題。關(guān)于這個小技巧的完整代碼很容易得到，你可以輕松獲得。
如果你想了解更多的關(guān)于居中的方法，可以來看看 這里。
經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2873571-1-1.html
本文鏈接：http://m.95time.cn/tech/web/2008/5998.asp 
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 簡單的通過CSS控制垂直居中 [3] 下一頁
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 4 頁 簡單的通過CSS控制垂直居中 [4]
