浮動（float）是css布局常用的乙個屬性。它可以左右移動，直至它的外邊緣碰到包含框或另乙個浮動框的外邊框。
float被設計出來的初衷是用於文字環繞效果。如下**：
我是乙個div，可以放。效果如下：我是一大推文字我是一大推文字我是一大推文字我是一大推文字
我是一大推文字我是一大推文字我是一大推文字我是一大推文字
我是一大推文字我是一大推文字我是一大推文字我是一大推文字
我是一大推文字我是一大推文字我是一大推文字我是一大推文字
我是一大推文字我是一大推文字我是一大推文字我是一大推文字
我是一大推文字我是一大推文字我是一大推文字我是一大推文字
我是一大推文字我是一大推文字我是一大推文字我是一大推文字
浮動會脫離文件流，當乙個元素浮動之後，不會影響到塊級元素的布局而只會影響內聯元素（通常是文字）的排列，文件中的普通流就表現得如同浮動框不存在一樣。
既然上面說到了元素浮動後會脫離文件流，那麼就來看一下效果：
右圖是浮動後的效果，設定div2浮動後，div3就會占用原來div2的位置。
這樣乙個場景：當div（father）裡面包含其他幾個div（child），且father沒有設定高度，child沒有浮動時，father的div是可以看到。但是，當child設定成float後，我們會發現father不見了，這就是坍塌問題。
右邊是將child設定成float:left之後的效果。
**如下：
塊1 暫無float:left坍塌解決辦法：塊2 暫無float:left
塊3 暫無float:left
1、新增乙個child元素，並設定clear:both;
.clear原理：給空元素設定clear後，因為它的左右兩邊不能有任何浮動元素，所以空元素下移到浮動元素下方。而空元素又包含在父塊中，相當於把父塊撐開了，視覺上起到了父塊包含浮動元素的效果。塊1 float:left
塊2 float:left
塊3 float:left
優點：簡單，**少，瀏覽器相容性好。
缺點：需要新增大量無語義的html元素，**不夠優雅，後期不容易維護。不推薦使用。
2、給father設定css樣式：overflow:hidden;
#father原理：給浮動元素的容器新增overflow:hidden;或overflow:aoto；可以使浮動元素回到容器層內，清除浮動。
3、給浮動元素的容器新增浮動
#father原理：4、使用css的:after偽元素
.clearfix:after:after偽元素（注意這不是偽類，而是偽元素，代表乙個元素之後最近的元素）。
給浮動元素的容器新增乙個clearfix的class，然後給這個class新增乙個:after偽元素實現元素末尾新增乙個看不見的塊元素清理浮動。
原理：1、通過偽元素新增乙個塊元素
2、偽元素設定clear：both後，類似於解決方法1，空元素下移到浮動元素下方。
3、但是新增的內容被hidden了，且高度設定為0，所以111時看不到的。
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 邊框不能撐開...
css基礎 float浮動
doctype html html lang en head meta charset utf 8 title float title style body per red style head body div class per div class red div 層疊樣式表 英文全稱 casc...