當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级

發布時間：2025/3/15 CSS 22 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文檔流：

普通流（normal flow）：

字面意思是普通流或者標準流，也就是常說的文檔流，指網頁內標簽正常是從上到下，從左到右排列的意思，css的定位機制有3種：普通流（標準流）、浮動、定位。

浮動：

是指使元素飄起來不完全脫離標準流的控制，絕對定位才是完全脫離標準流的，飄起來后不會再占原來的位置，浮動可以使塊級元素在一行排列顯示，float的值有：none默認值，元素不浮動、right元素向右浮動、left元素向左浮動。

.box ul li {float:left;}

浮動特性：

1、浮動只存在于水平方向，浮動不能上對齊和下對齊，浮動屬于內容content，所以是無法跨越padding和border的，要想跨越就會使用定位；

2、浮動找離自己最近的父級盒子對齊，浮動影響的是他的下面的盒子，自己浮動后會脫離文檔流不占位，從而下面的盒子會到它原來的位置排列；

3、浮動可以讓元素默認轉換為類似行內塊元素（float使元素顯示模式隱藏轉換，但是并非真實行內塊，因為行內塊元素中間默認有間隙，而float轉換后的元素中間沒有間隙）。

清除浮動：

主要是為了解決父級元素沒有給高度，子級盒子浮動不占位引起的父級盒子高度為0的問題，清除浮動后，父級盒子自動檢測高度，從而不會影響下面標準流盒子的布局。

清除浮動的方法有四種：

1、額外標簽法（標簽給clear屬性）：

在最后一個浮動元素末尾添加一個空標簽，并給這個標簽添加clear:both;屬性，添加屬性的三種方式任選其一都可以，這里采用行內樣式舉例子，clear的屬性值有left、right、both（推薦使用），此方法比較快捷，但是給頁面增加了無意義標簽，結構化較差。

2、父級標簽添加overflow屬性法：

給父級元素添加overflow屬性同樣可以實現清除浮動的效果，代碼簡潔，但是當頁面的內容增多時，overflow屬性不能使內容自動換行而隱藏，不能顯示溢出的內容，overflow的值：hidden（溢出隱藏）、scroll（滾動條）頁面會出現滾動條，不推薦使用、auto（自動）都可以清除浮動。

3、after偽元素兼zoom: 1;屬性法：

after偽元素可以解決額外標簽法中無意義的標簽問題，偽元素實際還是本身，只是給了另一個身份，其具體方法是：先聲明偽類并配置屬性：{content: “”;display: block;height: 0;clear: both;visibility: hidden;}，后父級盒子調用；zoom: 1屬性是解決兼容IE6~7問題的，屬性前面加*的作用是告訴瀏覽器，只有遇到IE6~7瀏覽器才會執行此代碼，其他瀏覽器不執行此代碼，如

4、雙偽元素法：

此方法和after偽元素法一樣，只是采用雙偽元素實現清除浮動效果，如：

定位（position）：

實際開發中，標準流和浮動不能滿足我們布局的需求，此時使用定位就可以很好的實現布局效果。定位屬性主要包括：定位模式和邊偏移。

定位模式：
position的屬性值：

絕對定位和固定定位會發生模式轉換，最終會默認轉換為inline-block行內塊模式

邊偏移屬性：

子絕父相搭配定位方式：

子絕父相是實際開發中一種常見的定位搭配方式，子級用絕對定位，父級用相對定位。父級用相對定位的原因是自己占位，不會影響下面元素的布局，子級用絕對定位的原因是自己不占位，方便其他元素布局，如常見輪播圖布局。

/* 子絕父相定位代碼展示： */<style>/* 實現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>頁面一</div><div>頁面二</div><div>頁面三</div><div>頁面四</div></div><div class="bottom"></div></body>

絕對定位的盒子水平、垂直居中算法：

普通盒子左右居中僅需margin：0 auto;即可，但是當給盒子給了定位或者浮動后，此方法失效，這時就只能使用算法兩步進行居中定位：1:使用絕對定位給自己盒子left值為父級盒子寬度的50%（left：50%）2:使用margin-left值為自己盒子寬度的一半的負值，案例代碼如下：

z-index層級：

浮動會使后面的元素默認排在最下面，而定位會使后面的元素默認排在最上面，有的時候需要改變這個順序，此時定位的元素可以使用z-index來解決這個問題（定位的元素才有z-index），其默認值為0，其值沒有限制。

提示：本文圖片等素材來源于網絡，若有侵權，請發郵件至郵箱：810665436@qq.com聯系筆者刪除。
筆者：苦海

總結

以上是生活随笔為你收集整理的CSS中文档流之普通流，浮动及定位、浮动特性及清除浮动的方式、定位模式，子绝父相搭配定位方式、z-index层级的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： android 热门搜索标签,Andro
下一篇： pyqt5 qscrollarea到达_