css中有什么清除浮動的方法

這篇文章主要介紹了css中有什么清除浮動的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

    css清除浮動的方法一：

    使用帶clear屬性的空元素

    在浮動元素后使用一個空元素如<divclass="clear"></div>，并在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<brclass="clear"/>或<hrclass="clear"/>來進行清理。

    .news{

    background-color:gray;

    border:solid1pxblack;

    }

    .newsimg{

    float:left;

    }

    .newsp{

    float:right;

    }

    .clear{

    clear:both;

    }

    <divclass="news">

    <imgsrc="news-pic.jpg"/>

    <p>sometext</p>

    <divclass="clear"></div>

    </div>

    說明：

    優點：簡單，代碼少，瀏覽器兼容性好。

    缺點：需要添加大量無語義的html元素，代碼不夠優雅，后期不容易維護。

    css清除浮動的方法二：

    使用CSS的overflow屬性

    給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動，另外在IE6中還需要觸發hasLayout，例如為父元素設置容器寬高或設置zoom:1。

    .news{

    background-color:gray;

    border:solid1pxblack;

    overflow:hidden;

    *zoom:1;

    }

    .newsimg{

    float:left;

    }

    .newsp{

    float:right;

    }

    <divclass="news">

    <imgsrc="news-pic.jpg"/>

    <p>sometext</p>

    </div>

    說明：

    在添加overflow屬性后，浮動元素又回到了容器層，把容器高度撐起，達到了清理浮動的效果。

    優點：不存在結構和語義化問題，代碼量極少

    缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢出的元素；04年POPO就發現overflow:hidden會導致中鍵失效，這是我作為一個多標簽瀏覽控所不能接受的。所以還是不要使用.

    css清除浮動的方法三：

    使用鄰接元素處理

    什么都不做，給浮動元素后面的元素添加clear屬性。

    .news{

    background-color:gray;

    border:solid1pxblack;

    }

    .newsimg{

    float:left;

    }

    .newsp{

    float:right;

    }

    .content{

    clear:both;

    }

    <divclass="news">

    <imgsrc="news-pic.jpg"/>

    <p>sometext</p>

    <divclass="content"></div>

    </div>

    css清除浮動的方法四：

    使用CSS的:after偽元素

    結合:after偽元素（注意這不是偽類，而是偽元素，代表一個元素之后最近的元素）和IEhack，可以完美兼容當前主流的各大瀏覽器，這里的IEhack指的是觸發hasLayout。

    給浮動元素的容器添加一個clearfix的class，然后給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素（Blockelement）清理浮動。

    .news{

    background-color:gray;

    border:solid1pxblack;

    }

    .newsimg{

    float:left;

    }

    .newsp{

    float:right;

    }

    .clearfix:after{

    content:"020";

    display:block;

    height:0;

    clear:both;

    visibility:hidden;

    }

    .clearfix{

    /*觸發hasLayout*/

    zoom:1;

    }

    <divclass="newsclearfix">

    <imgsrc="news-pic.jpg"/>

    <p>sometext</p>

    </div>

    說明：通過CSS偽元素在容器的內部元素最后添加了一個看不見的空格"020"或點"."，并且賦予clear屬性來清除浮動。需要注意的是為了IE6和IE7瀏覽器，要給clearfix這個class添加一條zoom:1;觸發haslayout。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“css中有什么清除浮動的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!