浮動是 css 的定位屬性。我們可以看一下印刷設計來了解它的起源和作用。印刷布局中，文字可以按照需要圍繞。一般把這種方式稱為「文字環繞」。
這是乙個例子：
在排版軟體裡面，存放文字的盒子可以被設定為允許**混排，或者無視它。無視**混排將會允許文字出現在的上面，就像它甚至不會在那裡一樣。這就是是否是頁面流的一部分的區別。網頁設計與此非常類似。
在網頁設計中，應用了css的float屬性的頁面元素就像在印刷布局裡面的被文字包圍的一樣程式設計客棧。浮動的元素仍然是網頁流的一部分。這與使用絕對定位的頁面元素相比是乙個明顯的不同。絕對定位的頁面元素被從網頁流裡面移除了，就像印刷布局裡面的文字框被設定為無視頁面環繞一樣。絕對定位的元素不會影響其它元素，其它元素也不會影響它，無論它是否和其它元素挨著。
像這樣在乙個元素上用css設定浮動：
#sidebar
fload屬性有四個可用的值：left 和right 分別浮動元素到各自的方向，none (預設的) 使元素不浮動，inherit 將會從父級元素獲取float值。
除了簡單的在周圍包圍文字，浮動可用於建立全部網頁布局。
浮動對小型的布局同樣有用。例如頁面中的這個小區域。如果我們在我們的小頭像上使用浮動，當調整大小的時候，盒子裡面的文字也將自動調整位置：
同樣的布局可以通過在外容器使用相對定位，然後在頭像上使用絕對定位來實現。這種方式中，文字不會受頭像大小的影響，不會隨頭像的大小而有相應變化。
清除(cle程式設計客棧ar)是浮動(float)的相關屬性.乙個設定了清除浮動的元素不會如浮動所設定的一樣，向上移動到浮動元素的邊界，而是會忽視浮動向下移動。如下，一圖頂千言。
上例中，側欄向右浮動，並且短於主內容區域。頁尾(footer)於是程式設計客棧按浮動所要求的向上跳到了可能的空間。要解決這個問題，可以在頁尾(footer)上清除浮動，以使頁尾(footer)待在浮動元素的下面。
#footer
清除(clear)也有4個可能值。最常用的是 both，清楚左右兩邊的浮動。left 和 right 只能清楚乙個方向的浮動。none 是預設值，只在需要移除已指定的清除值時用到。inherit 應該時第五個值，不過很奇怪的是 ie 不支援(這個不奇怪吧，ie 從來都這麼特立獨行吧 －糖伴西紅柿注)。只清除左邊或右邊的浮動，實際中很少見，不過絕對有他們的用處。
使用浮動(float)的乙個比較疑惑的事情是他們怎麼影響包含他們的父元素的。如果父元素只包含浮動元素，那麼它的高度就會塌縮為零。如果父元素不包含任何的可見背景，這個問題會很難被注意到，但是這是乙個很重要的問題。
塌陷的直觀對立面更不好，看看下面的情況：
當上面的塊級元素自動擴充套件以適應浮動元素時，段落間的文字流中會出現非自然的空白換行，而且沒有有效的方法來修正這個問題。對於這種情況，設計師的抱怨會更甚於對塌陷的抱怨（沒理解，不是設計完成之後才會進行頁面編碼嗎？－ 糖伴西紅柿）。
為了防止怪異的布局和跨瀏覽器的問題，塌陷問題幾乎總是被要處理的。我們在容器中的浮動元素之後，容器結束之前來清除浮動。
如果你很明確的知道接下來的元素會是什麼，可以使用 clear:both; 來清除浮動。這個方法很不錯，它不需要 hack，不新增額外的元素也使得它有良好的語義性。當然事情並不是都可以這樣解決的，工具箱中還是需要另外幾個清除浮動的工具。
不同的情況需要不同的浮動清除方法。以乙個具有不同樣式塊的網格為例。
為了從視覺上較好的把相似的塊聯絡起來，需要在必要的地方開啟新行，這裡是顏色改變的地方。如果每個顏色組都有乙個父元素的話，我們可以使用 overflow 或者 簡單清除方法。或者，在每組之間用乙個空div方法。額外的 div 之前並不存在，可以自己試試來看看哪個方法好。
浮動因脆弱而飽受詬病。大多數的脆弱性來自於 ie6 及其一系列的浮動相關 bug。因為越來越多的設計師不再支援 ie6 了，你也可以不關注它了。不過對於那些要關注的人來說，這裡有些大概。
如果需要文字環繞，除了 float 之外還真沒多少替代品。說到這，可以看看這個使文字圍繞不規則形狀的聰明技術。對於頁面布局，肯定有很多選擇。eric sol 在 a list apart 上有一篇文章人造絕對定位，介紹了乙個很有意思的技術，它在很多方面把浮動的擴充套件性和絕對定位的實力結合起來。css3 有template layout module，當它被廣泛支援時，將會是乙個頁面布局技術的選擇。
本文標題: css 關於浮動
本文位址:
CSS之關於clearfix 清除浮動
一，什麼是.clearfix 你只要到google或者baidu隨便一搜 css清除浮動 就會發現很多 都講到 盒子清除內部浮動時可以用到.clearfix clearfix after clearfix div class clearfix div class floated div div 上面...
css關於浮動的例子 float
floating examples box1 float to the left.box1 box2 box3 box1 float to left and under the box2 box1 box2 box3 all box float left box1 box2 box3 1 第乙個例子...
關於CSS浮動以及清除浮動的幾種方法
眾所周知，css浮動在日常頁面運用中起到非常重要的作用。例如，我們可以利用浮動來實現多欄布局等。如下圖，qzone利用浮動來實現雙欄布局的示例 它的頁面 是這樣的 主要 html部分 css部分 主要 col menu col main 不難看出，qzone是通過給左右欄定寬並且浮動來實現的。htm...