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

沒有什么異常，一切都是我們所預(yù)料的那樣。
現(xiàn)在，如果我們?yōu)楦?dòng)元素添加一個(gè)負(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
}
如下圖，或者點(diǎn)擊 這里 查看效果。

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

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

最新評(píng)論