什么是CSS Float？
float 是 css 的定位屬性。在傳統(tǒng)的印刷布局中，文本可以按照需要圍繞圖片。一般把這種方式稱為“文本環(huán)繞”。在網(wǎng)頁設(shè)計(jì)中，應(yīng)用了CSS的float屬性的頁面元素就像在印刷布局里面的被文字包圍的圖片一樣。浮動(dòng)的元素仍然是網(wǎng)頁流的一部分。這與使用絕對(duì) 定位的頁面元素相比是一個(gè)明顯的不同。絕對(duì)定位的頁面元素被從網(wǎng)頁流里面移除了，就像印刷布局里面的文本框被設(shè)置為無視頁面環(huán)繞一樣。絕對(duì)定位的元素不會(huì) 影響其它元素，其它元素也不會(huì)影響它，無論它是否和其它元素挨著。
像這樣在一個(gè)元素上用CSS設(shè)置浮動(dòng)：
#sidebar { float: right; }
fload屬性有四個(gè)可用的值：Left 和Right 分別浮動(dòng)元素到各自的方向，None (默認(rèn)的) 使元素不浮動(dòng)，Inherit 將會(huì)從父級(jí)元素獲取float值。
Float的用處
除了簡(jiǎn)單的在圖片周圍包圍文字，浮動(dòng)可用于創(chuàng)建全部網(wǎng)頁布局。
Float對(duì)小型的布局同樣有用。例如頁面中的這個(gè)小區(qū)域。如果我們?cè)谖覀兊男☆^像圖片上使用Float，當(dāng)調(diào)整圖片大小的時(shí)候，盒子里面的文字也將自動(dòng)調(diào)整位置：
同樣的布局可以通過在外容器使用相對(duì)定位，然后在頭像上使用絕對(duì)定位來實(shí)現(xiàn)。這種方式中，文本不會(huì)受頭像圖片大小的影響，不會(huì)隨頭像圖片的大小而有相應(yīng)變化。
清除Float
清除(clear)是浮動(dòng)(float)的相關(guān)屬性.一個(gè)設(shè)置了清除Float的元素不會(huì)如浮動(dòng)所設(shè)置的一樣，向上移動(dòng)到Float元素的邊界，而是會(huì)忽視浮動(dòng)向下移動(dòng)。如下，一圖頂千言。
上例中，側(cè)欄向右浮動(dòng)，并且短于主內(nèi)容區(qū)域。頁腳(footer)于是按浮動(dòng)所要求的向上跳到了可能的空間。要解決這個(gè)問題，可以在頁腳(footer)上清除浮動(dòng)，以使頁腳(footer)待在浮動(dòng)元素的下面。
清除(clear)也有4個(gè)可能值。最常用的是 both，清楚左右兩邊的浮動(dòng)。left 和 right 只能清楚一個(gè)方向的浮動(dòng)。none 是默認(rèn)值，只在需要移除已指定的清除值時(shí)用到。inherit 應(yīng)該時(shí)第五個(gè)值，不過很奇怪的是 IE 不支持(這個(gè)不奇怪吧，IE 從來都這么特立獨(dú)行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動(dòng)，實(shí)際中很少見，不過絕對(duì)有他們的用處。
偉大的塌陷
使用浮動(dòng)(float)的一個(gè)比較疑惑的事情是他們?cè)趺从绊懓麄兊母冈氐?。如果父元素只包含浮?dòng)元素，那么它的高度就會(huì)塌縮為零。如果父元素不包含任何的可見背景，這個(gè)問題會(huì)很難被注意到，但是這是一個(gè)很重要的問題。
塌陷的直觀對(duì)立面更不好，看看下面的情況：
當(dāng)上面的塊級(jí)元素自動(dòng)擴(kuò)展以適應(yīng)浮動(dòng)元素時(shí)，段落間的文本流中會(huì)出現(xiàn)非自然的空白換行，而且沒有有效的方法來修正這個(gè)問題。對(duì)于這種情況，設(shè)計(jì)師的抱怨會(huì)更甚于對(duì)塌陷的抱怨（沒理解，不是設(shè)計(jì)完成之后才會(huì)進(jìn)行頁面編碼嗎？－ 糖伴西紅柿）。
為了防止怪異的布局和跨瀏覽器的問題，塌陷問題幾乎總是被要處理的。我們?cè)谌萜髦械母?dòng)元素之后，容器結(jié)束之前來清除浮動(dòng)。
清除浮動(dòng)的技術(shù)
如果你很明確的知道接下來的元素會(huì)是什么，可以使用 clear:both; 來清除浮動(dòng)。這個(gè)方法很不錯(cuò)，它不需要 hack，不添加額外的元素也使得它有良好的語義性。當(dāng)然事情并不是都可以這樣解決的，工具箱中還是需要另外幾個(gè)清除浮動(dòng)的工具。
不同的情況需要不同的浮動(dòng)清除方法。以一個(gè)具有不同樣式塊的網(wǎng)格為例。
為了從視覺上較好的把相似的塊聯(lián)系起來，需要在必要的地方開啟新行，這里是顏色改變的地方。如果每個(gè)顏色組都有一個(gè)父元素的話，我們可以使用 overflow 或者 簡(jiǎn)單清除方法?；蛘撸诿拷M之間用一個(gè)空div方法。額外的 div 之前并不存在，可以自己試試來看看哪個(gè)方法好。
浮動(dòng)的問題
浮動(dòng)因脆弱而飽受詬病。大多數(shù)的脆弱性來自于 IE6 及其一系列的浮動(dòng)相關(guān) bug。因?yàn)樵絹碓蕉嗟脑O(shè)計(jì)師不再支持 IE6 了，你也可以不關(guān)注它了。不過對(duì)于那些要關(guān)注的人來說，這里有些大概。
-
推倒是浮動(dòng)元素內(nèi)的元素（大多是圖片）比浮動(dòng)元素本身寬造成的現(xiàn)象。大多數(shù)的瀏覽器會(huì)在浮動(dòng)之外渲染圖片，但是不會(huì)有伸出來的部分影響其他布局。IE 會(huì)擴(kuò)展浮動(dòng)來包含圖片，精彩大幅度地影響布局。一個(gè)普遍的例子是突破伸出主內(nèi)容之外把側(cè)欄推到下面。
-
快速修正：確保不是圖片造成這種情況，使用 overflow:hidden 來切除多余的部分。
-
雙倍邊距bug處理 IE6 時(shí)，另一個(gè)需要記住的事情是，如果在和浮動(dòng)方向相同的方向上設(shè)置外邊距(margin)，會(huì)引發(fā)雙倍邊距?？焖傩拚航o浮動(dòng)設(shè)置 display:inline; 而且不用擔(dān)心，它依然是塊級(jí)元素。
-
3像素間距是指挨著浮動(dòng)元素的文本會(huì)神奇的被踢出去3像素，好像浮動(dòng)元素的周圍有一個(gè)奇怪的力場(chǎng)一樣。快速修正：在受影響的文本上設(shè)置寬度或高度。
- IE7 中，底邊距 bug是當(dāng)浮動(dòng)父元素有浮動(dòng)子元素時(shí)，這些子元素的底邊距會(huì)被父元素忽略掉?？焖傩拚河酶冈氐牡變?nèi)補(bǔ)白(padding)代替。
摘自：http://paranimage.com/css-float-attribute/
CSS中 clear:both;可以終結(jié)在出現(xiàn)他之前的浮動(dòng) CSS中 clear:both;可以終結(jié)在出現(xiàn)他之前的浮動(dòng)
例如
<style>
.demodiv{float:left;width:100px;height:50px;background:red;margin:5px;}
.d{clear:both}
</style>
<div class="demodiv">1</div>
<div class="demodiv">2</div>
<div class="d"></div>
<div class="demodiv">3</div>
<div class="demodiv">4</div>