css什麼時候清除浮動

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

#推薦：《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什麼時候清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章！