浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另乙個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前乙個浮動框。
在 css 中，我們通過 float 屬性實現元素的浮動。
浮動框旁邊的行框被縮短，從而給浮動框留出空間，行框圍繞浮動框。
因此，建立浮動框可以使文字圍繞影象：
為了實現這種效果，在被清理的元素的上外邊距上新增足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
這種情況下，出現了乙個問題。因為浮動元素脫離了文件流，所以包圍和文字的 div 不佔據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
這樣可以實現我們希望的效果，但是需要新增多餘的**。常常有元素可以應用 clear，但是有時候不得不為了進行布局而新增無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news這樣會得到我們希望的效果。不幸的是，下乙個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然後使用適當的有意義的元素（常常是站點的頁尾）對這些浮動進行清理。這有助於減少或消除不必要的標記。.news img
.news p
事實上，w3school 站點上的所有頁面都採用了這種技術，如果您開啟我們使用 css 檔案，您會看到我們對頁尾的 div 進行了清理，而頁尾上面的三個 div 都向左浮動。
float 屬性的簡單應用
使影象浮動於乙個段落的右側。
將帶有邊框和邊界的影象浮動於段落的右側
使影象浮動於段落的右側。向影象新增邊框和邊界。
帶標題的影象浮動於右側
使帶有標題的影象浮動於右側
使段落的首字母浮動於左側
使段落的首字母浮動於左側，並向這個字母新增樣式。
建立水平選單
使用具有一欄超連結的浮動來建立水平選單。
建立無**的首頁
使用浮動來建立擁有頁首、頁尾、左側目錄和主體內容的首頁。
清除元素的側面
本例演示如何使用清除元素側面的浮動元素。
CSS中浮動與清除float浮動
浮動語法 float none left right float 定義網頁中其它文字如何環繞該元素顯示 浮動的目的 就是讓豎著的東西橫著來 橫向排列元素 有三個取值 left 元素活動浮動在文字左面 right 元素浮動在右面 none 預設值，不浮動。清除浮動clear left right bo...
CSS清除浮動（Float）
我們換一種方法表達上面的意思，因為紅色方塊的 左側浮動 才導致藍色方塊上移至紅色方塊的尾後 在上個例子中，為了達到瀏覽器相容性，我們分別在紅色藍色方塊css 中分別加了 float left 這樣ie和ff中顯示效果一樣，如果此時我們還想放乙個寬度400畫素，高度100的綠色方塊，並讓其處於第二行，...
css清除浮動float
css清除浮動float 1.分析html 123 分析css 樣式 outer.div1.div2.div3分析問題 外層未設定高度，如果裡面元素不設定float的話，外層容器的高度會隨內層元素高度撐開，因為設定float之後內層元素脫離文件流，導致高度無法撐開 1 背景不能顯示 2 邊框不能撐開...