定義：float是css樣式中的定位屬性，用於設定標籤物件（如標籤盒子、標籤等html標籤）的浮動布局，浮動也就是我們所說標籤物件浮動居左靠左（float:left）和浮動居右靠右(float:right)。
(1) 浮動元素會脫離正常的文件流，按照其外邊距指定的位置相對於它的上乙個塊級元素（或父元素）顯示；
（以同級元素為例）如圖：
執行結果：
可以看出第二個塊元素以100畫素的上邊距相對於第乙個塊元素浮動。
（以父元素為例）如圖：
執行結果：
從圖中可看到子元素以上邊距50畫素相對父元素向右浮動。
(2) 浮動元素後面的塊級元素的內容會向此浮動元素的外邊距靠齊（侷限於其元素寬度），但是邊框和背景卻忽略浮動元素而向上乙個（例項中為父元素）任意非浮動元素靠齊；
如圖：
執行結果：
塊2的背景因塊1的浮動而被蓋住，塊2裡的內容無法被覆蓋，如上圖多出來的文字「 2 」。
(3) 浮動元素後面的內聯元素會向此浮動元素的外邊距靠齊；
如圖：
執行結果：
內聯元素span向浮動元素div的右外邊距靠齊。
(4) 元素設定為浮動之後，就生成乙個塊級框（display:inline-block），沒必要再宣告display:block，可以設定寬高。
如圖：
執行結果：
元素本是行內元素，不可以設定寬和高，但通過浮動之後，變為了inline-block(行內塊級元素)，具有行內元素的自動換行以及塊級的可以設定寬高的屬性。
(1) 浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框（padding的內邊）或另乙個浮動框的邊框為止。
(2) 由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。
---------浮動屬性產生之初是為了實現「文字環繞」的效果，現成為常見的頁面布局方式。
如圖：
執行結果：
由圖中可以看出，文字隨著的浮動而對它進行環繞。
注意：若這裡不給父級元素定高，浮動元素（及文字）因脫離了文件流而無法將父級元素撐開，導致父元素高度坍塌。這裡就需要清除浮動。
如圖：
左邊定寬為200畫素，右邊通過margin-left將.left盒子空間給出，然後右側可通過塊元素的流體特性布局。
法一：clear
取值為left、right、both、none
屬性：屬性規定元素的哪一側不允許其他浮動元素。
2.法二：偽元素after
注意：after用於浮動元素父級
.#out::after#out定義：建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成乙個塊級框，而不論該元素本身是什麼型別。相對定位元素會相對於它在正常流中的預設位置偏移。
position的取值：
定義：設定為相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀，它原本所佔的空間仍保留。
特性:相對於初始位置進行定位。
屬性：left、right、top、bottom
特性：元素框的表現類似於將 position 設定為 absolute，不過其包含塊是視窗本身。
具體描述：指元素的位置相對於瀏覽器視窗是固定位置，即使視窗是滾動的它也不會滾動，且fixed定位使元素的位置與文件流無關，因此不佔據空間，且它會和其他元素發生重疊。
屬性：left、right、top、bottom
定義：預設值。沒有定位，元素出現在正常的流中。
屬性：不受top，bottom,left,right的影響
z-index屬性(值較大的在離使用者更近的地方顯示)來控制這些框的堆放次序。
z-index只能在position屬性值為relative或absolute或fixed的元素上有效。
定位 與浮動
1 區塊浮動 絕對定位 脫離正常的文件流，相當於飄起來 向 飄起來，於是就有了float 1，div 是塊級元素，他會自動換行 2，對元素使用 float 浮動的話，他會自動的把定位方式變為 絕對定位 如果絕對定位之後，這個元素下面還有元素，會頂上去 注釋 正常情況下，按照上下的順序正常顯示，當浮動...
浮動與定位
浮動 浮動元素會以某種方式從文件的正常流中刪除，再按照屬性值移動到制定的位置，浮動元素從某種意義上來說自成一派，但是他仍會對文件布局產生影響。注意事項 a.如果要對乙個非替換元素進行浮動，那麼必須為該元素宣告乙個寬度，否則，根據css規則，元素寬度近似為0，元素布局將會出現意想不到的結果。b.元素宣...
浮動與定位
1 元素的浮動屬性float的 基本的格式 選擇器一般他的值包過3個在內 屬性值 描述 left 元素會向左浮動 right 向右 none 不浮動 2 清除浮動 clear的屬性 選擇器屬性值 描述 left 不允許左側有浮動元素 清除左側浮動的影響 right 不允許右側有浮動元素 清除右側浮動...