一、概述
1.為什麼需要使用浮動
在標準流中，所有的塊級元素都獨佔一行。為了讓多個塊級元素可以在同一行上顯示，需要使用浮動或定位
2.語法
float：none | left | right
3.浮動的特點
(1) 讓元素脫離標準流，漂浮在標準流之上。(半脫標)
注意：浮動元素並沒有脫離標準流中的文字流，即標準流中的塊級元素會按照浮動元素不存在一樣排列，但文字流並不會和浮動元素重疊。
(2) 浮動元素因為脫標所以不占有標準流上的空間。
(3)元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容大小。
(4) 在乙個父元素中，如果有多個子元素，這些子元素只要有乙個浮動了，那麼其他子元素一般也需要浮動
(5) 浮動的對齊情況
a.浮動元素向左或向右移動，直到它的外邊緣碰到父元素的內邊距(不會超過內邊距)或上乙個浮動元素的外邊距為止；
b.如果在同一行顯示不下多個浮動的元素，那麼浮動的元素會自動換行；
c.如果上乙個元素為標準流中的元素，那麼該浮動元素總是和上乙個元素的底部對齊。
d.如果浮動元素的前後元素是都標準流中的元素，那麼浮動元素的後乙個元素會上移到浮動元素的前乙個元素下，這時浮動元素會壓著後乙個元素上
二、浮動應用場景
1.浮動能解決文字環繞這一問題（浮動產生的初衷）
因為浮動能讓塊級元素脫了標準流，但不能脫離文字流
例子：隨便寫一段文字，那麼這段文字會圍繞在周圍
如果不浮動，那麼顯示一行，下面的p元素顯示一行，如果浮動，那麼p元素的文字將環繞在周圍。
2.可以用浮動進行布局
比如乙個頁面分為上中下三部分，中間部分分為左右2部分，那麼為了讓中間部分在同一行顯示，需要浮動這2部分。
*.head
.main
.left
.right
.foot
三、浮動帶來的問題
1.父元素高度塌陷：當父元素中的所有子元素都是浮動時，且父元素沒有height屬性時，會出現父元素塌陷問題。很多時候父元素是沒有也不能有height屬性的
示例：#dv1
#dv2
img如果沒有設定float，那麼dv1的height為內容(即的height)的高度150px，dv2排在dv1下面。但如果設定了float，那麼div的height就為0了，dv2就會向上移動從而被壓著。
解決方案：清除浮動
2.margin合併問題
在沒有浮動的時候，當兩個垂直外邊距相遇時，它們將進行合併最後形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
在有浮動的情況下，不會出現外邊距合併的問題。
.father
.son
浮動的div上下外邊距為20px，而不是10px。
四、清除浮動
1.為什麼要清除浮動？
由於浮動元素會脫離標準流顯示，所以在浮動元素後面的塊級元素會預設佔據這些元素的位置，就會造成這些塊級元素會在浮動元素的下層顯示，出現浮動元素蓋住後面正常文件流元素的效果，但這往往不是我們想要的結果。
為了讓浮動元素後的標準流不被浮動元素壓著，以及解決父元素塌陷等問題，需要清除浮動。
2.如何清除浮動？
clear:left | right | both
這個規則只能影響使用清除的元素本身，不能影響其他元素。
例如：div1和div2都是左浮動且在同一行顯示，如果想讓div2換行，那麼需要在div2中設定clear:left，而不能在div1中設定clear:right。
注意：設定clear屬性的元素可以是浮動元素，也可以是非浮動元素。
五、清除浮動常用的方式
1.額外標籤法，應用clear:both
.dv1
.son
.dv2
dv1 son
缺點： 新增許多無意義的標籤，結構化較差。
2.在父元素中設定 overflow為 hidden|auto|scroll
.dv1
.son
.dv2
dv1 son
缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。
3.在父元素中使用偽元素:after
.dv1
.son
.dv2
/*前置偽元素 偽元素是行內元素 正常瀏覽器清除浮動方法*/
.clearfix:after
/*ie6清除浮動的方式 *號只有ie6-ie7執行，其他瀏覽器不執行*/
.clearfix
dv1 son
4.在父元素中使用雙偽元素:before :after
.dv1
.son
.dv2
/*前後置偽元素*/
.clearfix:before,.clearfix:after
.clearfix
dv1 son
總結：推薦使用第三種或者第四中方式
CSS 2 學習css的思路
開題不必太嚴肅，寫部落格也不像寫書，像聊天似的寫東西是最好的表達方式。記得之前看過乙個段子，也可能是一件真事兒，這不重要。大體內容如下 乙個香港的教授說 我們香港的大學和大陸的大學差的很遠啊，大陸的大學連看門保安都懂得哲學，因為當你想要進入校園時，保安都會問你乙個很哲學的問題 你是誰，你從 來，你到...
CSS2學習筆札
一 樣式 1 背景 2 文字 3 超銜接 4 列表 5 6 輪廓ie不支援 二 盒模型 一旦為頁面設定了恰當的 dtd，大多數瀏覽器都會按照上面的圖示來呈現內容。然而 ie 5 和 6 的呈現卻是不正確的。根據 w3c 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 paddi...
CSS2基本語法
選擇器 用於找到html標籤，對應給樣式。屬性 屬性名和屬性值組成的 屬性名和值用 隔開 多個屬性之間用 隔開 結構 選擇器 注釋 基本單位 百分比 in 英吋 cm 厘公尺 mm 公釐 em 1em 等於當前的字型尺寸，2em 等於當前字型尺寸的兩倍。ex 乙個 ex 是乙個字型的 x heigh...