css中清除浮動的方式有哪些

這篇文章主要為大家展示了css中清除浮動的方式有哪些，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“css中清除浮動的方式有哪些”這篇文章吧。

css是什么意思

css是一種用來表現HTML或XML等文件樣式的計算機語言，主要是用來設計網頁的樣式，使網頁更加美化。它也是一種定義樣式結構如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網頁或者單獨的樣式單文件中，而樣式規則的優先級由css根據這個層次結構決定，從而實現級聯效果，發展至今，css不僅能裝飾網頁，也可以配合各種腳本對于網頁進行格式化。

css中清除浮動有【clear:both】、after偽元素、對父級設置高度、對父級設置【overflow:hidden】四種方式。其中推薦使用的方式是使用after偽元素清除浮動。

CSS中清除浮動的四種方式如下：

1、clear:both清除浮動

HTML代碼：

     <div class="container"> 
         <div class="left">left浮動</div> 
         <div class="right">right浮動</div>
         <div class="clear"></div>
     </div>

CSS代碼：

<style>
        .container{
            margin:40px auto;
            width:400px;
            border:5px solid grey;
            background: yellow;/*背景正常顯示*/
        }
        .left{float:left;width:200px;height:100px;border: 1px solid red;}
        .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}  /*邊框能撐開*/
        .clear{clear:both;}
    </style>

結果：

父級背景以及邊框也能正常顯示和撐開了，優點方便使用，缺點是會多加HTML空標簽

2、使用after偽元素清除浮動（推薦使用）

優點：無需額外的標簽，瀏覽器兼容性好，是目前用的最多的一種清除浮動的方法之一，企業都在用；

缺點：ie6-7不支持偽元素：after，使用zoom:1觸發hasLayout.

HTML代碼：

     <div class="container"> 
         <div class="left">left浮動</div> 
         <div class="right">right浮動</div>
     </div>

CSS代碼：

<style>
        .container{
            width:400px;
            border:5px solid grey;
            background: yellow;
        }
        .left{float:left;width:200px;height:100px;border: 1px solid red;}
        .right{float:right;width:196px;height:100px;border: 1px solid red;background: blue;}
        .container:after{
            content:"";
            display: block;
            clear:both;
        }
        .container{    *zoom: 1;    /*ie6清除浮動的方式 *號只有IE6-IE7執行，其他瀏覽器不執行*/ }
    </style>

結果顯示：

3、對父級設置適合CSS高度

一般設置高度需要能確定內容高度才能設置。這里我們知道內容高度是100PX+上下邊框為2px，這樣具體父級高度為102px，

只需在上面的浮動缺點副作用代碼中的設置類樣式.container加上父級高度即可，這里我就不做過多演示了。缺點也非常明顯，本人不建議這樣清除浮動。

4、對父級設置overflow:hidden

原理：父元素定義overflow:hidden，此時，瀏覽器會自動檢查浮動區域的高度；

優點：簡單，無需增加新的標簽；

缺點：不能和position配合使用，因為超出的尺寸的會被隱藏；

代碼也是在副作用基礎上container中添加上overflow:hidden或者auto即可實現清除浮動效果

結果顯示：

優缺點：很完美，但是屬性太多；不好分別。

以上就是關于“css中清除浮動的方式有哪些”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。