什么是浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。

我們來看幾個例子

請看下圖：當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣

請看下圖： 當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

請看下圖：如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”

實現浮動

在 CSS 中，我們通過 float 屬性實現元素的浮動。float 屬性定義元素在哪個方向浮動。其可能值有：

left 元素向左浮動

right 元素向右浮動

none 默認值，元素不浮動

inherit 規定從父元素繼承float屬性的值。

清除浮動

我們先來了解一下CSS標準文檔流，說白了就是一個“默認”狀態。元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。最終窗體自上而下分成一行行，并在每行中從左至右的順序排放元素。

但是我們在布局的時候，由于某些原因(當使用浮動、絕對定位、固定定位)會使文檔脫離標準流，其中浮動會影響標準流的排列。

我們浮動的目的，就是可以把多個塊級元素放到想要的一行上。

清除浮動的原因：因為浮動會影響標準流，比如浮動造成的父級高度塌陷問題

清除浮動的方法

1、使用偽元素來清除浮動(:after,注意：作用于浮動元素的父親)

原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE專有屬性)可解決ie6,ie7浮動問題

優點：瀏覽器支持好，不容易出現怪問題(目前：大型網站都有使用，如：騰迅，網易，新浪等等)

缺點：代碼多，不少初學者不理解原理，要兩句代碼結合使用，才能讓主流瀏覽器都支持

建議：推薦使用，建議定義公共類，以減少CSS代碼

.clearfix:after{

content:""; /*設置內容為空*/

height:0; /*高度為0*/

line-height:0; /*行高為0*/

display:block; /*將文本轉為塊級元素*/

visibility:hidden; /*將元素隱藏*/

clear:both; /*清除浮動*/

}

.clearfix{

zoom:1; /*為了兼容IE*/

}

2、添加新的元素對其應用 clear:both

原理：添加一個空元素，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度

優點：簡單，代碼少，瀏覽器支持好，不容易出現怪問題

缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空頁面標簽，造成結構的混亂。

建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法

//對添加的元素使用 clear:both

.clear{clear:both;}

123

//添加一個新元素

3、父級div定義overflow:hidden

原理：使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度

優點：簡單，代碼少，瀏覽器支持好

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

建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用

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

123

4、父級div定義overflow:auto

原理：使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度

優點：簡單，代碼少，瀏覽器支持好

缺點：內部寬高超過父級div時，會出現滾動條。

建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。

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

123

5、父級定義高度height

只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題不推薦使用，只建議高度固定的布局時使用。

6、父級display設置成table

原理是將div屬性變成表格，可能會產生新的未知問題，不推薦使用，只作了解。

總結

以上是生活随笔為你收集整理的html 如何去除浮动,CSS浮动? 如何清除浮动？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。