清除浮動的4種方法

浮動：讓多個塊元素能夠在一行顯示 （讓多個div放一行）

問題：浮動是脫標的（out of normal flow），所以會影響別人。

清除浮動的本質： 解決父級元素內高爲0的問題（子級浮動後），讓父級佔位子。

 

相對於定位，在應用的時候，子絕父相，父級元素保留位置，故雖同脫標但無上述問題

 

清除浮動的方法：

1. 額外標籤法：最後一個浮動標籤後，加空盒子

 1 <div class="clear"></div> <!-- 最後一個浮動標籤後，新添加一個標籤 清除浮動 --> 

 

2. 給父級加overflow屬性

1     .father {
2         border: 1px solid red;
3         width: 300px;
4         overflow: hidden;   /*別加錯位置了，給父親加*/
5         /*不是全部的浮動咱們都須要清除 ，誰影響佈局，咱們清除誰*/
6     }

 

3. 用after僞元素

.clearfix:after {  /*正常瀏覽器 清除浮動*/
        content:"";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .clearfix {
        *zoom: 1;  /*zoom 1 就是ie6 清除浮動方式  *  ie7一下的版本所識別*/
    }

 

4. 用after和before 雙僞元素

.clearfix:before, .clearfix:after {
        content: "";
        display: table;
    }
    .clearfix:after {
        clear: both;
    }

    .clearfix {
        *zoom: 1;