關於浮動的清除

爲什麼要清除浮動

舉例來看：

    <div id="father">
        <div id="child1">

        </div>
        <div id="child2">

        </div>
    </div>

 

#father{
        border: 1px solid black;
        width: 700px;
    }
    #child1{
        /* float: left; */
        width: 200px;
        height: 200px;
        background-color: aqua;
    }
    #child2{
        /* float: left; */
        width: 400px;
        height: 400px;
        background-color: rgb(228, 23, 200);
    }

如果不對子盒子設置浮動，不設置父盒子高度，那麼父盒子可以正常被撐開；

但是如果將子盒子設置爲浮動，就會出現子盒子正常浮動，父盒子變成一條線的問題。（情況如下）

如何取消浮動

方案一：對父元素使用before和after僞類清除浮動

具體寫法如下：

#father:after, #father:before{
        content: "";
        display: table;
    }
    #father:after{
        clear: both;
    }
    #father{
        *zoom: 1;
    }

優缺點：

            優點：代碼簡潔，兼容大部分瀏覽器

            缺點：用zoom:1觸發hasLayout。（關於什麼是hasLayout，請參見一下博文https://blog.csdn.net/sunny327/article/details/38071503）

方案二：在最後一個子元素後面添加一個空白標籤，並對空白標籤使用clear:both;

寫法如下：

    <div id="father">
        <div id="child1">

        </div>
        <div id="child2">

        </div>
        <div id="clear">

        </div>
    </div>

#clear {
            clear: both;
        }

優缺點：

            優點：寫法簡單，通俗易懂。

            缺點：添加無用標籤，可讀性下降。

方案三：對父元素使用overflow：hidden

寫法如下：

#father {
            border: 1px solid black;
            width: 700px;
            overflow: hidden;
        }

優缺點：

            優點：寫法簡單，方便簡潔。

            缺點：溢出元素會被隱藏，會造成顯示內容缺失。

方案四：對父元素使用：after僞類

寫法如下：

        #father {
            border: 1px solid black;
            width: 700px;
            zoom: 1
        }

        #father:after {
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
        }

優缺點：

            優點：兼容大部分瀏覽器

            缺點：用zoom:1會觸發hasLayout。

 

推薦使用方案一和方案四來應對取消浮動問題，另外，可以把清除浮動代碼寫成公共類，減少代碼冗餘。