css中清除浮動的示例

小編給大家分享一下css中清除浮動的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在css中，當(dāng)我們對元素進(jìn)行float浮動時就需要清除浮動，因為當(dāng)元素進(jìn)行浮動時，元素就會脫離文檔流；并且在css中任何元素都可以浮動，浮動元素會生成一個塊級框，而不論它本身是何種元素。

清除浮動，什么時候需要清除浮動，清除浮動都有哪些方法 ？
一.什么時候需要清除浮動？

我們對元素進(jìn)行了浮動(float)時，我們的元素就會脫離文檔流，像一只小船一樣漂流在文檔之上。

在 CSS 中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
float主要流行與頁面布局，然后沒有使用后沒有清除浮動，就會后患無窮。

知乎上截圖：

分析HTML代碼結(jié)構(gòu)：

<p class="outer">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
</p>

分析CSS代碼樣式：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.p1{width: 80px;height: 80px;background: red;float: left;}.p2{width: 80px;height: 80px;background: blue;float: left;}.p3{width: 80px;height: 80px;background: sienna;float: left;}

這里我沒有給最外層的p.outer 設(shè)置高度，但是我們知道如果它里面的元素不浮動的話，那么這個外層的高是會自動被撐開的。但是當(dāng)內(nèi)層元素浮動后，就出現(xiàn)了影響：

1、父盒子的margin受到影響，無法實現(xiàn)左右居中，
2、我沒有給父盒子設(shè)置高度，浮動后父盒子的高度沒有被撐開，圖片中撐開的高度是padding帶來的效果。

清除浮動都有哪些方法 ?
清除(clear)也有4個可能值。最常用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚一個方向的浮動。none 是默認(rèn)值。

方法一：添加新的元素 應(yīng)用 clear：both；
HTML：

<p class="outer">
    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <p class="clear"></p>
</p>

CSS：

.clear{clear:both; height: 0; line-height: 0; font-size: 0}

效果：

即：

【補充】：
使用空標(biāo)簽清除浮動.

方法二：父級p定義 overflow: auto（注意：是父級p也就是這里的 p.outer）

HTML：

<p class="outer over-flow"> //這里添加了一個class    <p class="p1">1</p>
    <p class="p2">2</p>
    <p class="p3">3</p>
    <!--<p class="clear"></p>--></p>

CSS：

.over-flow{    overflow: auto; zoom: 1; //zoom: 1; 是在處理兼容性問題
}

效果圖同上。

原理：使用overflow屬性來清除浮動有一點需要注意，overflow屬性共有三個屬性值：hidden,auto,visible。我們可以使用hiddent和auto值來清除浮動，但切記不能使用visible值，如果使用這個值將無法達(dá)到清除浮動效果，其他兩個值都可以。

【補充】:
使用overflow屬性
此方法有效地解決了通過空標(biāo)簽元素清除浮動而不得不增加無意代碼的弊端。使用該方法是只需在需要清除浮動的元素中定義CSS屬性：overflow:auto，即可。 overflow:auto;是讓高度自適應(yīng)，zoom:1;是為了兼容IE6，也可以用height:1%;的方式來解決，注意，zoom不符合W3C標(biāo)準(zhǔn)。overflow:hidden也可以實現(xiàn)。overflow:hidden也可以實現(xiàn)。

方法三： 據(jù)說是最高大上的方法 :after 方法：（注意：作用于浮動元素的父親）
先說原理：它就是利用:after和:before來在元素內(nèi)部插入兩個元素塊，從而達(dá)到清除浮動的效果。其實現(xiàn)原理類似于clear:both方法，只是區(qū)別在于:clear在html插入一個p.clear標(biāo)簽，而outer利用其偽類clear:after在元素內(nèi)部增加一個類似于p.clear的效果。下面來看看其具體的使用方法：

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/.outer:after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

其中clear:both;指清除所有浮動；content: ‘.’; display:block;對于FF/chrome/opera/IE8不能缺少，
其中content（）可以取值也可以為空。visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清楚浮動。
即：

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;} .clearfix:after {content:'';display:block;clear:both;visibility:hidden;zoom:1;}

 <p class="outer clearfix">

【補充】：

使用after偽對象清除浮動

after偽對象非IE瀏覽器支持，所以并不影響到IE/WIN瀏覽器。具體寫法可參照以下示例。使用中需注意以下幾點。

a、該方法中必須為需要清除浮動元素的偽對象中設(shè)置height:0，否則該元素會比實際高出若干像素；

b、content屬性是必須的，但其值可以為空，藍(lán)色理想討論該方法的時候content屬性的值設(shè)為”.”

再次again：當(dāng)一個內(nèi)層元素是浮動的時候，如果沒有關(guān)閉浮動時，其父元素也就不會再包含這個浮動的內(nèi)層元素，因為此時浮動元素已經(jīng)脫離了文檔流。也就是為什么外層不能被撐開了！

浮動的特點:
1.浮動的元素，講向左或者向右浮動，浮動到包圍元素的邊上，或者上一個浮動元素的邊上為止。

2.浮動的元素，不再占用空間，且浮動元素的層級要高于普通元素。

3.浮動的元素，一定是塊元素，不管之前是什么元素。

4.如果浮動的元素沒有指定寬度的話，浮動后會盡可能變窄，因此浮動元素要指定寬和高。

5.一行的多個元素，要浮動大家一起浮動。

以上是css中清除浮動的示例的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！