讓父元素圍住浮動子元素的三種方法

<section>
    <img src="images/cuties.jpg" />
    <p>It's fun to float</p>
</section>
<footer>Here is the footer element that runs across the bottom of the page.</footer>

 為了更好地觀察各個元素的表現，給每個元素添加邊框：

<style type="text/css">
    img, p, section, footer {
        border:solid 1px darkblue; }
</style>

頁面由section元素和footer兩個大元素組成，section里有一張圖片和一個p元素。

下面為圖片添加一個左浮動：

<style type="text/css">
        img, p, section, footer {
            border:solid 1px darkblue; }
 img {float:left; }
</style>

可以看到，在為img添加了左浮動（float: left）之后，他的父元素（section）的盒子已經不把它框在里面了，section元素下面的footer元素里的文檔內容也跑到了圖片的右邊。這顯然不是我們平時在排版時想要做的效果，所以必須要調整一下，使得父元素繼續包裹住浮動了的img元素，而p元素放置在img元素的右邊，footer元素繼續停留在section的下方。想要實現這樣的效果，總共有三個方法。

 

1.為父元素添加overflow: hidden的樣式

<style type="text/css">
    img, p, section, footer {
        border:solid 1px darkblue; }
    img {
        float:left; }
 section {
 overflow: hidden;}
</style>

相對來說，這是最簡單的一種方法。實際上，overflow: hidden的樣式聲明的真正用途是：當為元素設定了寬度之后，就不會被它的子元素撐大，而子元素超出的部分會被切掉。除此之外，它還有另外一個作用，那就是迫使父元素包含其浮動的子元素。

 

2.同時浮動父元素

第二種促使父元素包含其浮動子元素的方法，那就是讓父元素也浮動起來。

<style type="text/css">
    img, p, section, footer {
        border:solid 1px darkblue; }
    img {
        float:left; }
 section {
 float: left;}
</style>

這時候可以發現，父元素section包圍住了浮動的子元素img，但是p元素的內容跑到了圖片的下方，要解決這個問題，需要給section添加一個width: 100%的樣式。而底下footer元素的內容因為section的浮動，所以跑到了它的右邊。為了強制要footer待在section的下方，需要為footer添加clear: left的樣式。被clear清除樣式后的元素是不會提升到浮動元素旁邊的。

<style type="text/css">
    img, p, section, footer {
        border:solid 1px darkblue; }
    img {
        float:left; }
 section {
 float: left; width:100%; }
 footer {
 clear: left;
    }
</style>

 

3.添加非浮動的清除元素

這種方式需要在父元素的最后面添加一個子元素，然后使用clear清除這個子元素的浮動。由於父元素一定會包含住沒有浮動的子元素，而且被clear清除后的元素會被強制定位於浮動元素的下方，從而使得父元素將所有子函數都包含進其“盒子”內。

<style type="text/css">
    img, p, section, footer {
        border:solid 1px darkblue; }
    img {
        float:left; }
 .clear_me {
 clear: left;}
</style>

<section>
    <img src="images/cuties.jpg" />
    <p>It's fun to float</p>
    <div class="clear_me"></div>
</section>
<footer>Here is the footer element that runs across the bottom of the page.</footer>

這樣，也可以達到我們的目的。

因為這種方式需要在網頁上添加新的內容，雖然最后處理后該內容並不可見，但手續比較復雜，我們可以使用 :after 這個偽元素來執行相應的操作。雖然這個方法與上面所介紹的操作手法大相徑庭，但是思路都是一樣的，所以這里把它們歸為同一個方法。

<style type="text/css">
    img, p, section, footer {
        border:solid 1px darkblue; }
    img {
        float:left; }
 .clear_fix:after{   　 /*取得section元素*/
 　 content:".";        /*並在它最后的內容之后添加一個點'.'*/
 　display: block;     /*把添加的內容顯示方式定義為塊級元素*/
 　 height: 0px;        /*將該塊級元素的高度設為0px*/
 　visibility: hidden; /*隱藏該元素*/
 　 clear: both;        /*清除其浮動顯示*/
        }
</style>

<section class="clear_fix">  　　<!--為section添加一個類名-->
    <img src="images/cuties.jpg" />
    <p>It's fun to float</p>
</section>
<footer>Here is the footer element that runs across the bottom of the page.</footer>

 

 

介紹完了這三種讓父元素依舊包圍浮動子元素的方法之后，現在來做一個總結：

1.為父元素增加樣式:overfload: hidden；

2.浮動父元素，為其添加width: 100%的樣式，然后為它下面的元素添加clear: left的樣式。

3.在父元素的內容末尾添加一個元素，該元素應為塊級元素，高度為0，並且不可見。

第1種方式不適合於下拉菜單中，因為它會把下拉菜單的外部內容都切掉。第2種方式不適用於自動外邊距居中的元素，否則它會浮動。第3種方式沒有很明顯的缺點，只不過:after偽元素在IE家族中直到IE8才被接受。