浮動多用於多欄布局中，浮動元素脫離了文件流，其父元素看不到它，因而也就不會圍住它。為了控制浮動效果，有時候需要清除浮動。
1、對元素浮動
考慮一種情形，假如我們需要將文字放在的右側，該怎麼做呢？最為常用的方式是對進行浮動。為了演示，我們先建立乙個網頁，頁面**如下：
1頁面效果如下：doctype html
>
2<
html
>
3<
head
>
4<
title
>擁有父元素的消除浮動
看到了在標題「something else」的左邊，但是由於img元素脫離了文件流，footer元素的內容會往上擠。我們想要的效果應該是footer元素的內容「另起一行來顯示」。我們用以下方法來實現我們所需要的效果
2、消除元素浮動
方法一：為父元素應用overflow
為section元素新增樣式值：overflow：hidden。最後的樣式值變為：
1頁面效果如圖2-1所示：section
5img 6p
7footer
這種效果就是我們所需要的了。實際上，overflow:hidden 宣告的真正用途是為了防止包含元素被超大內容撐大，超大的內容會被容器剪下掉。除此之外，overflow:hidden 還有另外乙個作用，即它能可靠的迫使父元素包含其浮動的子元素。
方法二：同時浮動父元素
最終的**為：
1父元素section也浮動之後，不管其子元素是否浮動，它都會緊緊地包圍其子元素，因此我們用width:100%讓section與瀏覽器同寬。當section浮動之後，footer元素的內容會盡量往上靠，努力擠到section旁邊去。為了強制footer元素依舊呆在section元素的下面，我們需要給footer元素消除浮動，新增clear：left。被消除浮動的元素不會被提到浮動元素的旁邊。得到的效果如圖2-1所示。section
7img 8p
9footer
方法三：新增非浮動的清除元素
我們可以在浮動元素的後面新增乙個元素，讓這個元素清除浮動。父級元素一定會包含清除了浮動的元素。這樣的方式有兩種：
第一種是直接新增乙個表現型的元素，頁面**變為：
css**最終變為：
1第二種方式給父級section元素新增乙個類clearfix，該類的**如下：section
5img 6p
7footer
8.clear
.clearfix:after頁面**最終為
如果在網頁中浮動元素並沒有父級元素時，我們也可以採取這種方式來達到我們想要的效果。
這兩種方式所實現的效果都如圖2-1所示。
資料參考：
《css設計指南（第3版）》
圍住浮動元素的三種方法
浮動元素脫離了文件流,其父元素也看不到它了,因而也不會包圍它。這種情況有 時候並非我們想要的,下面向大家傳授三種圍住浮動子元素的方法。記住,這三種 方法你都得掌握,這樣才能審時度勢,選擇最合適的一種。為了演示浮動元素的行為,這種行為對布局會產生什麼影響,以及解決這個問題的 三種方法,我們首先要從一張...
清除浮動的三種方法
lang en charset utf 8 清除浮動的三種方法title type text css div3 div3 after style head style background blue border 1px solid gold 使用空標籤清除浮動。增加了無意義的結構元素 style ...
清除浮動的三種方法
在我使用浮動時，為我們帶來了便利的同時也帶了一點影響，我們在使用浮動時往往不會給父級盒子新增高度，因為子盒子會撐起父盒子。這樣一旦我們使用浮動，則下面使用的div會跑到父級盒子的位置，畢竟使用浮動，不占有位置，解決此問題我列出了三種方法，希望能幫助大家。1 在浮動元素後新增空標籤 eg 111222...