文檔流
做網(wǎng)頁布局的時(shí)候魄藕，有時(shí)候會(huì)對網(wǎng)頁元素進(jìn)行浮動(dòng)内列，按照自己的需求對網(wǎng)頁元素進(jìn)行排版，元素浮動(dòng)之后會(huì)脫離文檔流背率，造成一些小麻煩话瞧，這時(shí)候就需要清除浮動(dòng)嫩与，讓元素按照自己需求正常排版顯示。
什么叫脫離文檔流呢交排？又為什么一會(huì)兒浮動(dòng)又要清除浮動(dòng)呢划滋？
之前在知乎看到一個(gè)問題，問的是什么是文檔流和文本流到底是什么埃篓？問題地址
我的理解和總結(jié)：
一丶什么是文檔流：
文檔流只是我們把國外的標(biāo)準(zhǔn)翻譯過來的一種習(xí)慣的叫法处坪，英文原文為“normal flow ” 應(yīng)該叫做正常流。
正常流是什么呢架专？
1.元素在父元素中排序規(guī)則同窘，從左上角開始。從左至又部脚，自上而下想邦。
2.浮動(dòng)(float)、絕對定位(absolute)委刘、固定定位(fixed)三種方式定位會(huì)脫離文檔流丧没。 同時(shí)上面的兩種定位還能讓浮動(dòng)失效。
3.元素分為三種大的類型 塊狀 內(nèi)聯(lián) 內(nèi)聯(lián)塊 每一種有自己的特性钱雷。
-
塊狀：獨(dú)占一行 在父元素內(nèi)一行內(nèi)只有它自己骂铁，不能放下其它元素。支持所有css樣式 罩抗。
默認(rèn)繼承父元素100%的寬（不設(shè)寬）
-
內(nèi)聯(lián)：內(nèi)容撐開寬度 拉庵，不獨(dú)占一行√椎伲可以設(shè)置寬高钞支，但不會(huì)有作用，可以設(shè)置左右的margin,border,padding操刀。
注意： 內(nèi)聯(lián)元素又叫行內(nèi)元素烁挟，由名字可知，它的屬性主要在一行內(nèi)展示骨坑。
它可以設(shè)置margin撼嗓，但是上下的margin卻不會(huì)有作用。設(shè)置padding和border欢唾，可以顯示你設(shè)置的屬性且警，但是只有左右的屬性是被其他瀏覽器其他元素“正視”的，只有左右的padding和border會(huì)占據(jù)空間礁遣。而上下的卻不在文檔流內(nèi)斑芜。如果你上下的值設(shè)置的足夠大，給它一個(gè)背景色他會(huì)遮蓋其它元素祟霍。 內(nèi)聯(lián)塊 ：同屬性排在一行 不獨(dú)占一行 支持所有css樣式 代碼換行被解析杏头，間距取決于父級(jí)的文字大小
脫離文檔流會(huì)發(fā)生什么呢盈包？
1.會(huì)打亂元素的排序規(guī)則，設(shè)置浮動(dòng)醇王，定位后會(huì)按照自己設(shè)置的屬性值來擺放
2.讓各類型元素失去原來各自的特性呢燥，變成同一種元素。
? 以前看過一個(gè)面試題說元素浮動(dòng)后就會(huì)等于 display:block寓娩；準(zhǔn)確來說并不正確疮茄。
? 浮動(dòng)會(huì)讓元素有塊元素部分性質(zhì)，如：支持所有css樣式根暑，子元素和內(nèi)容能撐開自身（不設(shè)置） 。 但是不會(huì)獨(dú)占一行徙邻，不能繼承父元素寬高排嫌。（給元素只設(shè)置高，然后浮動(dòng)元素缰犁，元素會(huì)因?yàn)闆]有寬度而無法顯示）
? 對于父元素來說淳地，脫離了文檔流的子元素不能再撐開父元素了，所以會(huì)出現(xiàn)高度塌陷的問題帅容。
二丶關(guān)于浮動(dòng)
為什么要浮動(dòng)?
主要是為了按照網(wǎng)頁的每一板塊按照自己的需求來進(jìn)行排版颇象。
為什么清除浮動(dòng)呢？
個(gè)人覺得叫清除浮動(dòng)不太準(zhǔn)確并徘，應(yīng)該叫清除浮動(dòng)的弊端和適合遣钳。
那些情況需要清除浮動(dòng)呢？
1.父元素高度塌陷
子元素浮動(dòng)麦乞，父元素沒有設(shè)置高度蕴茴，子元素就無法撐開父元素 ，父元素高度就為0姐直。
2.元素浮動(dòng)后影響到其他同級(jí)元素或者父元素元素的內(nèi)容文字
前面提到過文檔流和文本流倦淀，一個(gè)元素的內(nèi)容文字等就是文本流。元素浮動(dòng)后上升一個(gè)高度到文本流声畏，給一個(gè)父元素內(nèi)的子元素浮動(dòng)后撞叽，父元素的文字會(huì)對浮動(dòng)元素進(jìn)行環(huán)繞。
浮動(dòng)元素只能影響寫在他后面的元素插龄，兩個(gè)塊狀同級(jí)元素愿棋，給第一個(gè)浮動(dòng)，就會(huì)遮蓋第二個(gè)元素辫狼。
個(gè)人理解：
如果正常的文檔流規(guī)定一個(gè)高度初斑，那么元素的border,padding,margin 都在第一層，而元素的文本流即文字和內(nèi)聯(lián)塊元素（內(nèi)聯(lián)元素又稱置換元素膨处，寫在代碼里的標(biāo)簽只是空殼见秤。常見內(nèi)聯(lián)塊如 img input 標(biāo)簽 只有你設(shè)置了圖片砂竖，寫了文字，這些東西才算是文本流鹃答。 ）會(huì)在第二層乎澄。
如果浮動(dòng)了 ，元素就會(huì)提高一層测摔，跑到文本流置济。如果浮動(dòng)元素比正常元素大的多，就不有文字環(huán)繞了锋八，而是完全把文字?jǐn)D出去浙于。
那么如果給元素?zé)o限嵌套，后代元素設(shè)置浮動(dòng)挟纱，豈不是后代元素?zé)o限高羞酗。其實(shí)并不是，對于整個(gè)頁面來說正常的文本流只有兩個(gè)高度紊服，且高度都是相對的檀轨。
如圖 div2 div3都浮動(dòng)了，div2 div3的高度只會(huì)是2欺嗤。 如果div1 div3浮動(dòng) 那么div1會(huì)跑到div3上面嗎参萄？父元素再怎么浮動(dòng)都不會(huì)對其后代元素造成任何影響。
個(gè)人覺得本質(zhì)上元素應(yīng)該都是同級(jí)之間才能造成空間上的影響（比如文字與文字煎饼，文字與其它塊元素讹挎。），但是元素浮動(dòng)后吆玖，會(huì)對后面正常的元素內(nèi)容文字內(nèi)容產(chǎn)生文字環(huán)繞淤袜。兩個(gè)正常的同級(jí)元素的文字超出了，卻只會(huì)進(jìn)行重疊衰伯，這就很難理解铡羡。暫時(shí)可以認(rèn)為浮動(dòng)后的元素相當(dāng)于把所有元素的文本流都拉到了與自己同一個(gè)規(guī)則層度。
清除浮動(dòng)弊端的方法
1.父元素也浮動(dòng) margin:0 auto 失效
2.父級(jí) dispaly:inline-block 同上
3.父級(jí)加高
4.br標(biāo)簽
<br clear = "all">
5.在浮動(dòng)的元素后面加 div設(shè)置樣式
.class{
clear:both/left/right/none;
}
6.偽類清除浮動(dòng)
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
7.父級(jí)加 overflow:hidden;
一般常用第6種方法意鲸，其他方法都有局限性或者違反了結(jié)構(gòu)樣式分離的標(biāo)準(zhǔn)烦周。
但是第6種只能解決高度塌陷，無法解決同級(jí)浮動(dòng)元素遮蓋的效果怎顾。
可以用第7種來解決读慎，overflow:hidden;
浮動(dòng)還能解決的問題：
margin重疊問題：
同級(jí)元素不浮動(dòng)margin就會(huì)重疊，兩個(gè)元素的距離就等于margin大的那個(gè)槐雾。
三丶關(guān)于定位
定位移動(dòng)的是自己本身和所有后代元素 夭委，后代在自身里的屬性規(guī)則還是遵循文檔流的 。
相對定位
position:relitive;
還會(huì)占據(jù)原來位置 募强，相當(dāng)于結(jié)構(gòu)還在原來位置 株灸，而畫面跑到了新的位置 崇摄。
新位置的畫面會(huì)遮蓋正常的文檔流 不會(huì)對正常的文檔流產(chǎn)生影響
當(dāng)父元素設(shè)置overflow: hidden時(shí)，如果元素超出了父元素 超出部分會(huì)被隱藏
絕對定位
position:absolute;
針對有定位的父級(jí)（或祖先級(jí)）定位慌烧，會(huì)完全脫出文檔流逐抑。 元素不會(huì)占據(jù)原來的位置 會(huì)把元素提高到另一個(gè)層級(jí)。
如果父級(jí)沒有設(shè)置定位屹蚊，overflow: hidden;不會(huì)起作用 只有在定位參照的元素上寫才有作用厕氨。
定位會(huì)從參照的元素border開始定位
沒有寫值的時(shí)候,元素已經(jīng)脫離了文檔流，但是顯示的畫面還是按照原來的排序規(guī)則顯示 汹粤。如果再其上方寫一個(gè)塊元素命斧， 會(huì)把他擠下去 。讓上方的元素浮動(dòng)嘱兼， 畫面會(huì)蓋住浮動(dòng)元素冯丙。
只寫一邊，另一邊繼續(xù)遵守 遭京。
定位之后顯示的畫面 都不會(huì)遵循正常的文檔流 瀏覽器都是從上之下讀取代碼，經(jīng)過渲染后 如果兩個(gè)元素的畫面在一個(gè)位置泞莉，后寫的會(huì)覆蓋先寫的哪雕。
絕對定位的一個(gè)導(dǎo)航案例
html
<ul class="nav">
<li>
<a href="#">首頁</a>
<ul class="nav_sub">
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
</ul>
</li>
<li>
<a href="#">首頁</a>
<ul class="nav_sub">
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
</ul>
</li>
<li>
<a href="#">首頁</a>
<ul class="nav_sub">
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
</ul>
</li>
<li>
<a href="#">首頁</a>
<ul class="nav_sub">
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
</ul>
</li>
<li>
<a href="#">首頁</a>
<ul class="nav_sub">
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
<li>
<a href="#">首頁1</a>
</li>
</ul>
</li>
</ul>
css
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.nav {
width: 400px;
height: 50px;
/* background: steelblue; */
margin: 150px auto;
}
.nav li {
float: left;
}
.nav a {
background: aquamarine;
display: block;
width: 50px;
height: 40px;
line-height: 40px;
text-align: center;
/* background: burlywood; */
}
.nav .nav_sub a {
display: none;
}
.nav>li:hover .nav_sub a {
display: block;
}
.nav li ul {
position: absolute;
}
如果沒有給子菜單設(shè)置絕對定位就會(huì)出現(xiàn)這種情況
給子菜單絕對定位就不會(huì)占據(jù)原來的寬度。
總結(jié)：浮動(dòng)會(huì)脫離文檔流鲫趁，但其實(shí)還是在一個(gè)層度斯嚎。絕對定位，和對于瀏覽器定位都是完全脫離文檔流挨厚。從可視的角度來說已經(jīng)完全脫離了正常的網(wǎng)頁結(jié)構(gòu)堡僻。
現(xiàn)在css出了flex布局，比float布局好用多了疫剃，但是由于瀏覽器兼容問題钉疫，大部分都是用在手機(jī)端。
水平有限巢价，如有不足請多指教牲阁。
18年7月15補(bǔ)：
網(wǎng)頁中的文檔流，浮動(dòng)壤躲，定位都是服務(wù)于網(wǎng)頁布局的城菊。
文檔流即正常網(wǎng)頁元素的排序規(guī)則，一些屬性繼承等等規(guī)則碉克。
定位也只是相對定位和其他兩種定位有點(diǎn)區(qū)別凌唬。相對定位他它本身的元素結(jié)構(gòu)屬性位置都不會(huì)改變，變的只有它的畫面位置漏麦。其他兩種定位呢客税，會(huì)改變自身原有的一些特性况褪，會(huì)從原來位置脫離，相當(dāng)于父元素沒有這個(gè)子元素了霎挟，畫面位置只會(huì)針對參考元素來改變窝剖。
至于浮動(dòng)呢错洁，個(gè)人覺得設(shè)計(jì)的很不合理衩茸。它會(huì)讓元素脫離文檔流，讓父元素高度塌陷病涨，同時(shí)又能影響到其他元素的文本流熬北，不僅僅是父元素的文本流疙描，還能影響到父元素同級(jí)元素的文本流等等。通常網(wǎng)頁布局出現(xiàn)問題讶隐，都是浮動(dòng)造成的起胰。而且那些稀奇古怪清除方法，清除浮動(dòng)的效果還不一樣巫延。
文章寫的有點(diǎn)亂效五，沒有寫詳細(xì)的案例，理解起來會(huì)很費(fèi)勁炉峰。等有時(shí)間了畏妖，會(huì)把各種情況的案例補(bǔ)充完全，把文章梳理一下疼阔。
一些題外話,別人的文章只是用來參考的戒劫，不一定別人寫的就對。如果出現(xiàn)問題了婆廊，最好的辦法就是自己重新敲一遍迅细，或者自己去debug，去看看出問題的元素哪些屬性和你預(yù)想的不一樣等等淘邻，只有自己理解了茵典，才是最重要的。對自己所學(xué)的知識(shí)歸納整理宾舅，也是很重要的敬尺，去注冊個(gè)有道云，映象筆記等等贴浙，把自己的筆記整理整理砂吞，到最后弄個(gè)思維導(dǎo)圖知識(shí)點(diǎn)串一串。條理崎溃，思路清晰了蜻直，干什么都能觸類旁通。
寫博客只是對于知識(shí)理解程度的一種檢索，還有就是鍛煉自己的表達(dá)能力概而，希望大家一起共勉呼巷。
待續(xù)...
