這是為什么
這里引發(fā)了一個關于 float 的有趣的行為，也正好去去好好的了解一下它。那么為什么當我們使用一個絕對的元素它會消失，而使用浮動卻不會產生這樣的后果呢？
浮動的本質就是流動，即使你可以通過下一個元素的 clear 重新控制它。位于浮動之后的元素為浮動騰出了空間（瀏覽器通常是為絕對元素增加上邊距以清除浮動）。一旦浮動元素不在了，絕對元素將回到這個頁面的正常位置。因此當我們?yōu)楦釉卦O置一個負的 margin 之后，它將克服任何的阻礙去移動，因為它本身就是基于流動的。當我們逐漸的移動浮動元素，一直到它消失在外邊界里，那么緊跟它的絕對元素將回到頁面中的正常位置，而不會跟隨浮動元素消失。
這是一個事實，當浮動元素不斷的往上拉，直到消失，我們的絕對元素依然留在我們的視野之中。這可能有些難理解，但是我們可以通過一個簡單的例子去了解它。
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>
這里我們先在上邊設定了一個絕對元素，然后設置了一個浮動元素，再在浮動元素下設置了一個絕對元素。請看下圖，或者看 這個頁面 的效果。

沒有什么異常，一切都是我們所預料的那樣。
現在，如果我們?yōu)楦釉靥砑右粋€負的 margin：
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-100px
}
那么我們可以看到下圖的效果，或者到 這里 查看效果。

依然一切正常，如我們所預料的，但是如果我們把負的數值調整為 200 呢？
.float{
width:200px;
height:100px;
background:red;
float:left;
margin-top:-200px
}
如下圖，或者點擊 這里 查看效果。

正如你看到的那樣，浮動元素離開了它下邊的元素，但是浮動下邊的元素并沒有跟隨浮動，而是留在了本來屬于它的位置。這很好的解釋了我們最初的例子中將浮動元素拉離視野所出現的狀況。
然而，加入我們將紅色浮動元素的 float 屬性刪除，那么藍色的元素將跟隨它一起被拉入綠色元素的區(qū)域。如下圖所示，或者在 這里 查看效果。

當一個絕對元素的邊距 margin 發(fā)生變化時，所有它后邊的絕對元素的也將發(fā)生相應的改變。
我希望各位會對這個小技巧（雖然可能你已經知道）感興趣，也希望你們能和我一起分享你們經常遇到的問題。關于這個小技巧的完整代碼很容易得到，你可以輕松獲得。
如果你想了解更多的關于居中的方法，可以來看看 這里。

最新評論