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

　　float也會(huì)導(dǎo)致元素脫離文檔流，但還在文檔或容器中占據(jù)位置，把文檔流和其它float元素向左或向右擠，并可能導(dǎo)致?lián)Q行。圖片的文字環(huán)繞布局效果就是float。

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

塊級(jí)元素獨(dú)占一行

塊級(jí)元素，在頁(yè)面中獨(dú)占一行，自上而下排列，也就是傳說(shuō)中的流。

可以看出，即使div1的寬度很小，頁(yè)面中一行可以容下div1和div2，div2也不會(huì)排在div1后邊，因?yàn)閐iv元素是獨(dú)占一行的。

注意，以上這些理論，是指標(biāo)準(zhǔn)流中的div。無(wú)論多么復(fù)雜的布局，其基本出發(fā)點(diǎn)均是：“如何在一行顯示多個(gè)div元素”。

浮動(dòng)

浮動(dòng)：浮動(dòng)的框可以左右移動(dòng)，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣。

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

顯然標(biāo)準(zhǔn)流已經(jīng)無(wú)法滿足需求，這就要用到浮動(dòng)。?浮動(dòng)可以理解為讓某個(gè)div元素脫離標(biāo)準(zhǔn)流，漂浮在標(biāo)準(zhǔn)流之上，和標(biāo)準(zhǔn)流不是一個(gè)層次。

重要結(jié)論：

假如某個(gè)div元素A是浮動(dòng)的，如果A元素上一個(gè)元素也是浮動(dòng)的，那么A元素會(huì)跟隨在上一個(gè)元素的后邊(如果一行放不下這兩個(gè)元素，那么A元素會(huì)被擠到下一行)；如果A元素上一個(gè)元素是標(biāo)準(zhǔn)流中的元素，那么A的相對(duì)垂直位置不會(huì)改變(因?yàn)闃?biāo)準(zhǔn)流中的塊級(jí)元素是獨(dú)占一行的)，也就是說(shuō)A的頂部總是和上一個(gè)元素的底部對(duì)齊。

可以看出：

元素浮動(dòng)之前，也就是在標(biāo)準(zhǔn)流中，是豎向排列的，而浮動(dòng)之后可以理解為橫向排列。

分左右，有些標(biāo)簽不能在同一排顯示的使用浮動(dòng)布局之后就可以同時(shí)出現(xiàn)在一排。一般是用在行列元素上面。說(shuō)白了就是方便你把東西整在一排。希望對(duì)你有幫助，祝你學(xué)習(xí)愉快！

上手flex布局吧，移動(dòng)端大放的年代，flex才是未來(lái)的布局趨勢(shì)

簡(jiǎn)而言之，就是包裹與破壞。慕課網(wǎng)上有張?chǎng)涡翊笊竦摹渡钊肜斫鈌loat》課程，也可以去他的博客看看更仔細(xì)的文字說(shuō)明。詳細(xì)的說(shuō)明了float魔鬼屬性帶來(lái)的優(yōu)勢(shì)和缺點(diǎn)以及解決辦法。float一開始存在僅僅是因?yàn)槲淖汁h(huán)繞效果，后來(lái)被運(yùn)用于分欄布局。樓上真是夠了，什么叫不是一排的東西變成一排。