css中清除浮動的示例

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

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

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

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

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

知乎上截圖：

分析HTML代碼結構：

<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 設置高度，但是我們知道如果它里面的元素不浮動的話，那么這個外層的高是會自動被撐開的。但是當內層元素浮動后，就出現了影響：

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

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

方法一：添加新的元素 應用 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}

效果：

即：

【補充】：
使用空標簽清除浮動.

方法二：父級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值，如果使用這個值將無法達到清除浮動效果，其他兩個值都可以。

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

方法三： 據說是最高大上的方法 :after 方法：（注意：作用于浮動元素的父親）
先說原理：它就是利用:after和:before來在元素內部插入兩個元素塊，從而達到清除浮動的效果。其實現原理類似于clear:both方法，只是區別在于:clear在html插入一個p.clear標簽，而outer利用其偽類clear:after在元素內部增加一個類似于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;的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現清楚浮動。
即：

.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、該方法中必須為需要清除浮動元素的偽對象中設置height:0，否則該元素會比實際高出若干像素；

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

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

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

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

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

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

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

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