CSS 清除浮動的方法

  CSS中利用float屬性可以使元素脫離文檔流浮動到父元素的左側或者浮動的父元素的右側，這時如果對元素使用浮動屬性，會導致父元素不能被撐開。

CSS代碼:

.wrapper{
    width: 40em;
    border: 1px solid red;
}

.leftFloat{
    width: 9em;
    height: 5em;
    background: #ffffcc;
    float: left;
}
.rightFloat{
    width: 9em;
    height: 5em;
    background: #ffffcc;
    float: right;
}

佈局:

<div class="wrapper">
    
    <div class="leftFloat">
        left float
    </div>

    <div class="rightFloat">
        right float
    </div>

</div>

效果圖：

對父div內的兩個div分別使用向左float和向右浮動後，父div就成了兩條線，彷彿沒有了內容填充了。這種浮動內部元素產生的副作用可以採用以下幾種方式來消除。

1.設置父容器的高度

.wrapper{
    width: 40em;
    height: 82px; /*內容高度 + 邊框高度*/
    border: 1px solid red;
}

設置父容器height值後，消除了浮動子元素產生的影響。但這種方式一定要確保高度是固定值，如果內容高度不定，這種方式將不再適用。

2.利用clear屬性清除浮動

<div class="wrapper">

    <div class="leftFloat">
        left float
    </div>

    <div class="rightFloat">
        right float
    </div>

    <div class="clearFloat"></div>

</div>

.clearFloat{
    clear: both;
}

如上在父容器內添加一個空div,並將該div的樣式屬性設置爲clear:both，這樣也能消除浮動。

3.爲父容器添加overflow:hidden屬性或者overflow:auto屬性

.wrapper{
    width: 40em;
    border: 1px solid red;
    overflow: hidden;
}

<div class="wrapper">

    <div class="leftFloat">
        left float
    </div>

    <div class="rightFloat">
        right float
    </div>


</div>

4.爲父容器添加浮動屬性

.wrapper{
    width: 40em;
    border: 1px solid red;
    float: left;
}

父容器使用float會同時產生其他影響，當不設置父容器的寬高時，父容器的寬高根據被子元素填充大小來確定。

如去除wrpper的width屬性:

.wrapper{
    border: 1px solid red;
    float: left;
}

父容器的寬高均依據子元素的填充大小確定

5.使用clearfix:after和zoom清除浮動

爲父容器添加的屬性類

.clearfix:after{
    display: block;
    content: "";
    height: 0;
    visibility: hidden;
    clear: both;
}
.clearfix{
    zoom: 1;
}

其中IE8+以及其他主流瀏覽器支持.clearfix:after，zoom則是爲了確保兼容IE6,IE7

將其應用到父容器

<div class="wrapper clearfix">

    <div class="leftFloat">
        left float
    </div>

    <div class="rightFloat">
        right float
    </div>


</div>

這種方式清除浮動是最爲推薦的，兼容性好，有不會出現其他問題。