基礎(chǔ)概念
文檔流：
所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右饿这，從上往下的流式排列。
脫離文檔流
脫離文檔流撞秋，也就是將元素從普通的布局排版中拿走长捧，其他盒子在定位的時(shí)候，會當(dāng)做脫離文檔流的元素不存在而進(jìn)行定位吻贿。
非完全脫離文檔流
左右結(jié)構(gòu)div盒子重疊現(xiàn)象串结，一般是由于相鄰兩個(gè)DIV一個(gè)使用浮動一個(gè)沒有使用浮動。一個(gè)使用浮動一個(gè)沒有導(dǎo)致DIV不是在同個(gè)“平面”上舅列，但內(nèi)容不會造成覆蓋現(xiàn)象肌割，只有DIV形成覆蓋現(xiàn)象。
主要內(nèi)容
讓元素脫離文檔流的方式有兩種：浮動和定位
在HTML的文檔對象模型里剧蹂，采用的是流式布局声功，也就是說，塊級元素是獨(dú)占一行的宠叼，想讓塊級元素并排，主要是兩種辦法其爵，一種是在CSS里設(shè)置塊級元素的display為inline-block冒冬。但是很多時(shí)候并不適合用這種辦法，更多時(shí)候我們會采用浮動的辦法摩渺。
浮動简烤，主要有兩種float：left；和float：right摇幻；浮動可以讓塊級元素脫離標(biāo)準(zhǔn)文檔流横侦，可以理解成為定義了浮動的元素，就要向所定義方向去移動绰姻，直到被阻擋住或者碰到了父容器邊界枉侧。如果當(dāng)行剩寬度不足，那么所浮動的盒子狂芋，就會浮動到下一行榨馁。浮動為實(shí)現(xiàn)頁面布局提供了一種解決方案。
但是帜矾，不能忽略的是翼虫，有時(shí)候通過簡簡單單的浮動不能達(dá)到我們對界面布局的需求屑柔。這時(shí)候定位的重要性就體現(xiàn)了出來，定位可以分為四種：relative（相對定位）珍剑、absolute（絕對定位）掸宛、fixed（固定定位）、static招拙。當(dāng)我們不對元素應(yīng)用定位屬性時(shí)唧瘾，就相當(dāng)于static。
那么迫像，如何理解relative定位呢劈愚？應(yīng)用了relative定位的元素（盒子模型）不脫離標(biāo)準(zhǔn)文檔流，可以對它設(shè)定top闻妓、left菌羽、right、bottom值由缆，實(shí)現(xiàn)對元素（盒子模型）相對于原來位置的微調(diào)注祖，top即元素相對于原來的位置下移（可以設(shè)定負(fù)值，作用相當(dāng)于設(shè)置正值bottom）均唉，left是元素相對于原來的位置右移是晨。相同的，right為左移舔箭，bottom是上移罩缴。
absolute定位：應(yīng)用了absolute定位的元素會脫離文檔流，好像它從來沒有存在過层扶，這時(shí)它的定位是相對于他的應(yīng)用了relative定位的祖先元素而言的箫章。而且它還有一個(gè)很重要的特性：就是會根據(jù)設(shè)定的位移值實(shí)現(xiàn)“跨越”，什么意思呢镜会？就是說檬寂，對其設(shè)定top、left戳表、right桶至、bottom是相對于他的祖先元素（盒子）的邊界而言的。如果對其設(shè)定哪個(gè)位移方向匾旭，此元素（盒子）會先移動到那個(gè)方向的邊界镣屹，然后相對于邊界去移動。
fixed定位：fixed定位同樣是脫離了標(biāo)準(zhǔn)文檔流季率，不過他是相對于瀏覽器的窗口而言的野瘦，不會隨著滾動條或者是界面的移動而改變，同樣可以設(shè)定top、left鞭光、right吏廉、bottom值。
浮動是偉大的惰许，但是會造成父級坍塌席覆，也就是說，當(dāng)容器內(nèi)的全部元素設(shè)定為浮動或者內(nèi)部不浮動的元素不足以支撐父級時(shí)汹买，父級的高度不滿足我們對頁面布局的要求佩伤。
針對頁面浮動造成的父級坍塌主要有以下幾種方法：
1、固定高度
給父標(biāo)簽添加一個(gè)高度晦毙，或者增加一個(gè)固定高度的子div生巡；
但是這樣限定固定高度會使頁面操作不靈活，不推薦
2见妒、清除浮動（推薦）
clear語法：
clear : none | left | right | both
取值：
none : 默認(rèn)值孤荣。允許兩邊都可以有浮動對象
left : 不允許左邊有浮動對象
right : 不允許右邊有浮動對象
both : 不允許有浮動對象
但是需要注意的是：clear屬性只會對自身起作用，而不會影響其他元素须揣。
3盐股、父級標(biāo)簽overflow
overflow:hidden;
overflow:auto;
4、利用偽類
.clearfix:after { <----在類名為“clearfix”的元素內(nèi)最后面加入內(nèi)容耻卡；
content: "."; <----內(nèi)容為“.”就是一個(gè)英文的句號而已疯汁。也可以不寫。
display: block; <----加入的這個(gè)元素轉(zhuǎn)換為塊級元素卵酪。
clear: both; <----清除左右兩邊浮動幌蚊。
visibility: hidden; <----可見度設(shè)為隱藏。注意它和display:none;是有區(qū)別的溃卡。
visibility:hidden;仍然占據(jù)空間霹肝，只是看不到而已；
line-height: 0; <----行高為0塑煎；
height: 0; <----高度為0；
font-size:0; <----字體大小為0臭蚁；
}
