CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级
文檔流：
普通流（normal flow）：
字面意思是普通流或者標(biāo)準(zhǔn)流，也就是常說(shuō)的文檔流，指網(wǎng)頁(yè)內(nèi)標(biāo)簽正常是從上到下，從左到右排列的意思，css的定位機(jī)制有3種：普通流（標(biāo)準(zhǔn)流）、浮動(dòng)、定位。
浮動(dòng)：
是指使元素飄起來(lái)不完全脫離標(biāo)準(zhǔn)流的控制，絕對(duì)定位才是完全脫離標(biāo)準(zhǔn)流的，飄起來(lái)后不會(huì)再占原來(lái)的位置，浮動(dòng)可以使塊級(jí)元素在一行排列顯示，float的值有：none默認(rèn)值，元素不浮動(dòng)、right元素向右浮動(dòng)、left元素向左浮動(dòng)。
.box ul li {float:left;}浮動(dòng)特性：
1、浮動(dòng)只存在于水平方向，浮動(dòng)不能上對(duì)齊和下對(duì)齊，浮動(dòng)屬于內(nèi)容content，所以是無(wú)法跨越padding和border的，要想跨越就會(huì)使用定位；
2、浮動(dòng)找離自己最近的父級(jí)盒子對(duì)齊，浮動(dòng)影響的是他的下面的盒子，自己浮動(dòng)后會(huì)脫離文檔流不占位，從而下面的盒子會(huì)到它原來(lái)的位置排列；
3、浮動(dòng)可以讓元素默認(rèn)轉(zhuǎn)換為類(lèi)似行內(nèi)塊元素（float使元素顯示模式隱藏轉(zhuǎn)換，但是并非真實(shí)行內(nèi)塊，因?yàn)樾袃?nèi)塊元素中間默認(rèn)有間隙，而float轉(zhuǎn)換后的元素中間沒(méi)有間隙）。
清除浮動(dòng)：
主要是為了解決父級(jí)元素沒(méi)有給高度，子級(jí)盒子浮動(dòng)不占位引起的父級(jí)盒子高度為0的問(wèn)題，清除浮動(dòng)后，父級(jí)盒子自動(dòng)檢測(cè)高度，從而不會(huì)影響下面標(biāo)準(zhǔn)流盒子的布局。
清除浮動(dòng)的方法有四種：
1、額外標(biāo)簽法（標(biāo)簽給clear屬性）：
在最后一個(gè)浮動(dòng)元素末尾添加一個(gè)空標(biāo)簽，并給這個(gè)標(biāo)簽添加clear:both;屬性，添加屬性的三種方式任選其一都可以，這里采用行內(nèi)樣式舉例子，clear的屬性值有l(wèi)eft、right、both（推薦使用），此方法比較快捷，但是給頁(yè)面增加了無(wú)意義標(biāo)簽，結(jié)構(gòu)化較差。
<style>.father {background-color: #ffaacf;}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}/*采用內(nèi)聯(lián)樣式添加clear屬性法.clear {clear: both;}*/</style><body><div class="father"><div class="son"></div><div class="son2"></div><div style="clear:both" class="clear"></div><!-- 添加空標(biāo)簽實(shí)現(xiàn)清除浮動(dòng)屬性法 --></div><div class="brother"></div></body>2、父級(jí)標(biāo)簽添加overflow屬性法：
給父級(jí)元素添加overflow屬性同樣可以實(shí)現(xiàn)清除浮動(dòng)的效果，代碼簡(jiǎn)潔，但是當(dāng)頁(yè)面的內(nèi)容增多時(shí)，overflow屬性不能使內(nèi)容自動(dòng)換行而隱藏，不能顯示溢出的內(nèi)容，overflow的值：hidden（溢出隱藏）、scroll（滾動(dòng)條）頁(yè)面會(huì)出現(xiàn)滾動(dòng)條，不推薦使用、auto（自動(dòng)）都可以清除浮動(dòng)。
<style>.father {background-color: #ffaacf;overflow: hidden;/*給父級(jí)標(biāo)簽添加overflow屬性實(shí)現(xiàn)清除浮動(dòng)*/}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}</style><body><div class="father"><div class="son"></div><div class="son2"></div></div><div class="brother"></div></body>3、after偽元素兼zoom: 1;屬性法：
after偽元素可以解決額外標(biāo)簽法中無(wú)意義的標(biāo)簽問(wèn)題，偽元素實(shí)際還是本身，只是給了另一個(gè)身份，其具體方法是：先聲明偽類(lèi)并配置屬性：{content: “”;display: block;height: 0;clear: both;visibility: hidden;}，后父級(jí)盒子調(diào)用；zoom: 1屬性是解決兼容IE6~7問(wèn)題的，屬性前面加*的作用是告訴瀏覽器，只有遇到IE6~7瀏覽器才會(huì)執(zhí)行此代碼，其他瀏覽器不執(zhí)行此代碼，如
<style>/* 給父級(jí)盒子聲明偽類(lèi)，類(lèi)名可以直接使用father，如：.father:after {} */.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}.clearfix { /* 解決IE6~7之間存在的兼容問(wèn)題,此屬性可以直接寫(xiě)在.father {}中，省去一個(gè)類(lèi)名的聲明 */*zoom: 1;/* css hack 解決IE低版本瀏覽器兼容性*/}.father {background-color: #ffaacf;}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}</style><body><div class="father clearfix"><!-- 父級(jí)標(biāo)簽調(diào)用偽類(lèi) --><div class="son"></div><div class="son2"></div></div><div class="brother"></div></body>4、雙偽元素法：
此方法和after偽元素法一樣，只是采用雙偽元素實(shí)現(xiàn)清除浮動(dòng)效果，如：
<style>/* 聲明雙偽類(lèi)： */.clearfix:before,.clearfix:after {content: "";display: block;height: 0;}.clearfix:after {clear: both;}.clearfix { /* 解決IE6~7之間存在的兼容問(wèn)題 */*zoom: 1;}.father {background-color: #ffaacf;}.son {width: 100px;height: 100px;background-color: #666666;float: left;}.son2 {width: 200px;height: 200px;background-color: #9bdf13;float:left;}.brother {height: 100px;background-color: #333333;}</style><body><div class="father clearfix"><!-- 父級(jí)標(biāo)簽調(diào)用偽類(lèi) --><div class="son"></div><div class="son2"></div></div><div class="brother"></div></body>定位（position）：
實(shí)際開(kāi)發(fā)中，標(biāo)準(zhǔn)流和浮動(dòng)不能滿足我們布局的需求，此時(shí)使用定位就可以很好的實(shí)現(xiàn)布局效果。定位屬性主要包括：定位模式和邊偏移。
定位模式：
position的屬性值：
絕對(duì)定位和固定定位會(huì)發(fā)生模式轉(zhuǎn)換，最終會(huì)默認(rèn)轉(zhuǎn)換為inline-block行內(nèi)塊模式
邊偏移屬性：
子絕父相搭配定位方式：
子絕父相是實(shí)際開(kāi)發(fā)中一種常見(jiàn)的定位搭配方式，子級(jí)用絕對(duì)定位，父級(jí)用相對(duì)定位。父級(jí)用相對(duì)定位的原因是自己占位，不會(huì)影響下面元素的布局，子級(jí)用絕對(duì)定位的原因是自己不占位，方便其他元素布局，如常見(jiàn)輪播圖布局。
/* 子絕父相定位代碼展示： */<style>/* 實(shí)現(xiàn)btnleft 和 btnright位于topbox的兩邊居間，bottom盒子在top盒子上面： */* {margin: 0;padding: 0;}body {width: 600px;height: 500px;margin: 0 auto;}div {border: 1px solid yellowgreen;}.topbox,.bottom {width: 400px;height: 200px;background-color: #443366;position: relative;}.btnright~div {width: 98px;height: 160px;background-color: #666666;margin-top: 15px;float:left;}.bottom {background-color: #998866;}.btnleft,.btnleft+div {width: 50px;height: 50px;background-color: turquoise;position: absolute;top: 70px;}.btnleft+div {right: 0px;}</style><body><div class="topbox"><div class="btnleft"></div><div class="btnright"></div><div>頁(yè)面一</div><div>頁(yè)面二</div><div>頁(yè)面三</div><div>頁(yè)面四</div></div><div class="bottom"></div></body>絕對(duì)定位的盒子水平、垂直居中算法：
普通盒子左右居中僅需margin：0 auto;即可，但是當(dāng)給盒子給了定位或者浮動(dòng)后，此方法失效，這時(shí)就只能使用算法兩步進(jìn)行居中定位：1:使用絕對(duì)定位給自己盒子left值為父級(jí)盒子寬度的50%（left：50%）2:使用margin-left值為自己盒子寬度的一半的負(fù)值，案例代碼如下：
<style>.box {border: 1px solid #552;width: 400px;height: 300px;position: relative;}.son {border: 1px solid red;width: 120px;height: 100px;margin: 0 auto;/* float: left; */position: absolute;left: 50%;margin-left: -60px;top: 50%;margin-top: -50px;}</style><body><div class="box"><div class="son"></div></div></body>z-index層級(jí)：
浮動(dòng)會(huì)使后面的元素默認(rèn)排在最下面，而定位會(huì)使后面的元素默認(rèn)排在最上面，有的時(shí)候需要改變這個(gè)順序，此時(shí)定位的元素可以使用z-index來(lái)解決這個(gè)問(wèn)題（定位的元素才有z-index），其默認(rèn)值為0，其值沒(méi)有限制。
提示：本文圖片等素材來(lái)源于網(wǎng)絡(luò)，若有侵權(quán)，請(qǐng)發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者 刪除。
筆者：苦海
總結(jié)
以上是生活随笔為你收集整理的CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： android 热门搜索标签,Andro
- 下一篇： CSS中盒子模型、嵌套盒子中垂直外边距塌