float: left|right; 可以自動排列自動折行, 但需要clear來配合清除浮動;display: inline-block 有些時候可以替代float實現相同的效果.
? ? ? ?position: absolute|relative; 要配合top,left等定位;
使用：
　　position: absolute會導致元素脫離文檔流，被定位的元素等于在文檔中不占據任何位置，在另一個層呈現，可以設置z-index。PS的圖層效果就是position: absolute。

　　float也會導致元素脫離文檔流，但還在文檔或容器中占據位置，把文檔流和其它float元素向左或向右擠，并可能導致換行。圖片的文字環繞布局效果就是float。

　　display的inline-block不脫離文檔流，將block元素當作大型字符嵌入文檔流內，類似于img或者input默認效果。

塊級元素獨占一行

塊級元素，在頁面中獨占一行，自上而下排列，也就是傳說中的流。

可以看出，即使div1的寬度很小，頁面中一行可以容下div1和div2，div2也不會排在div1后邊，因為div元素是獨占一行的。

注意，以上這些理論，是指標準流中的div。無論多么復雜的布局，其基本出發點均是：“如何在一行顯示多個div元素”。

浮動

浮動：浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。

浮動框不屬于文檔中的普通流，當一個元素浮動之后，不會影響到塊級框的布局而只會影響內聯框（通常是文本）的排列，文檔中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。顧名思義，就是漂浮于普通流之上，像浮云一樣，但是只能左右浮動。

顯然標準流已經無法滿足需求，這就要用到浮動。?浮動可以理解為讓某個div元素脫離標準流，漂浮在標準流之上，和標準流不是一個層次。

重要結論：

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素，那么A元素會被擠到下一行)；如果A元素上一個元素是標準流中的元素，那么A的相對垂直位置不會改變(因為標準流中的塊級元素是獨占一行的)，也就是說A的頂部總是和上一個元素的底部對齊。

可以看出：

元素浮動之前，也就是在標準流中，是豎向排列的，而浮動之后可以理解為橫向排列。

分左右，有些標簽不能在同一排顯示的使用浮動布局之后就可以同時出現在一排。一般是用在行列元素上面。說白了就是方便你把東西整在一排。希望對你有幫助，祝你學習愉快！

上手flex布局吧，移動端大放的年代，flex才是未來的布局趨勢

簡而言之，就是包裹與破壞。慕課網上有張鑫旭大神的《深入理解float》課程，也可以去他的博客看看更仔細的文字說明。詳細的說明了float魔鬼屬性帶來的優勢和缺點以及解決辦法。float一開始存在僅僅是因為文字環繞效果，后來被運用于分欄布局。樓上真是夠了，什么叫不是一排的東西變成一排。