浮動定義了元素在哪個方向浮動，不論被浮動的元素本身是何種元素，浮動之後都會生成乙個塊級框。
浮動主要是為了讓頁面中的元素在水平方向依次橫向排列，在頁面布局中非常有用。
相關屬性值值描述
left
左浮動right
右浮動none
預設，元素不浮動
inherit
從父元素繼承float屬性的值
沒有浮動之前，所有的元素在文件的普通流中（如下圖：）
某元素浮動之後，它便飄了起來，我們稱之為脫離文件流。（就好比氣球充滿氣體之後便離開地面飛了~~）
他們都是通過一種特定的條件達到了某種效果，氣球通過新增氣體才可以飄，那元素便是新增浮動（例如：float:left;）才可以飄。
既然它都飄了，那它便不在佔據瀏覽器位置，那麼該位置就會被該元素後面沒有浮動的元素佔據。注意是被沒有浮動的元素佔據位置哦。
這就像你在kfc，你本來在一樓就餐，結果因為樓上的某處風景（新增了float），你去了二樓就餐，那麼你原來的位置就會被其他人佔據，而這些佔你原來位置的人都是沒被樓上風景吸引的人（即沒有新增float）。
下面我們具體看一下新增float屬性後的效果：
一一
二二三三
當一一、二二、三三都浮動之後，我們會看到他們的老父親（id=「father」）div沒有高度了，這就是高度塌陷（解決方法之後寫）。
一一、二二左浮動，三三右浮動的效果：
只給一一float之後，我們可以發現一一飄了，二二佔據了他之前的位置，並且文字會環繞一一顯示，不被覆蓋。這個時候頁面排版便產生了問題，為了整個頁面的可視性，這邊就會涉及到清除浮動了，我們總不能給使用者兩張重疊的圖，讓使用者腦補吧。
當我給二
二、三三浮動之後，會發現他們並不會到一一那一行，說明浮動之前的元素都不會受到影響。
父元素div（id=「father」）高度變小，是因為二
二、三三飄了，不在一層，就不計算他們的高度了，其實還是高度塌陷的問題，解決方法之後涉及。
以上都是空間足夠的一些效果顯示，給他們的老父親div新增固定寬，會發現一起浮動之時，寬度不夠，放不下的元素會往下一行走，直到有足夠的空間。如果最終也沒有足夠的空間，該元素一部分就到了瀏覽器頁面之外，看不到了。
當然還會有高度不夠被卡住的現象，我們可以自己嘗試，還蠻有趣的。我就不一一展示了。
一一
二二三三
這裡我們便來談談浮動之後產生的高度塌陷怎麼解決，其實也就是清除浮動了的方法啦。
插播乙個小知識點：
在css中，clear屬性用來清除浮動。
語法：選擇器值描述
left
不允許左側有浮動元素（清除左側浮動影響）
right
不允許右側有浮動元素
both
同時清除左右兩側的浮動影響
插播結束，我們繼續~~
hack
描述優點缺點1
給父元素設定高度
適合高度固定的頁面布局
侷限性有點大，高度自適應的不能用哦
2父級新增overflow屬性（觸發bfc）。針對ie6相容問題新增宣告zoom:1;
適合高度自適應的頁面布局
文字內容增多容易不換行，會對溢位的內容隱藏裁剪,無法顯示溢位的內容。
3新增額外標籤
通俗易懂
**冗餘
4給父元素設定高度
符合閉合浮動思想，結構語義化正確
ie6和ie7不支援:after，使用zoom:1;觸發haslayout。
5父元素浮動
無只能解決乙個問題，並觸發其他問題
6父元素display:table;
適合父元素寬度固定，想讓若干個子元素平分寬度
布局不好控制，引發的問題更多，不建議使用7定位
可以實現頁面效果
解決不了高度塌陷問題
（1、5、6、7從根本上算不上方法，不用在意）
具體詳述hack2：
父級新增overflow屬性（觸發bfc），以及針對ie6相容問題新增宣告。
div給父元素新增overflow：hidden；overflow：auto；overflow：scroll；都可以實現。但我們常用overflow：hidden；
因為auto屬性值，如果內容超出，會顯示滾動條，不超出則不顯示；而scroll不管內容是否超出都會顯示滾動欄，視覺效果上不好看。
具體詳述hack3：
給浮動元素後面新增乙個空標籤（如：div、p、h3等）並且新增宣告
具體詳述hack4：
萬能清除法之偽物件（偽元素）選擇器 :after
給塌陷的元素新增
.clearall:after
.clearall
display: block; 因為content加進去的內容，類似新增了乙個span，內容是橫著排列的，那麼就不會下來，也就不會把u1給撐開，所以要轉成塊元素豎著排列。
visibility: hidden;是為了隱藏content裡面的內容。
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了...