CSS系列 (05)：浮動&定位詳解

浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。 —— W3C

文字環繞

float可以實現塊級元素的文本環繞浮動元素的布局

<div class="left">左浮動</div>
<div class="right">右浮動</div>
<div class="no-float">
  我是塊級元素，我不浮動。我是塊級元素，我不浮動。我是塊級元素，我不浮動。我是塊級元素，我不浮動。我是塊級元素，我不浮動。我是塊級元素，我不浮動。我是塊級元素，我不浮動。我是塊級元素，我不浮動
</div>

小貼士：

• 行內塊(inline-block)元素的文本無法實現文字環繞布局，直接不行

• 行內(inline)元素的文本雖然可以實現文字環繞布局，但是不建議使用，其背景色不會鋪滿，如下圖

布局

1. 浮動元素總是找離它最近的父級元素對齊，但是不會超出內邊距的范圍

   

   <div class="container">    
     <div class="item right">右浮動</div>
     <div class="item el-block">不浮動-塊級元素</div>
     <div class="item el-block">不浮動-塊級元素</div>
   </div>
   

2. 浮動元素脫離標准流，會將后面標准流中的塊級元素覆蓋【但不會覆蓋普通流中的行內元素和行內塊元素，它們將會和浮動元素並排顯示】

   

   <div class="container"> 
     <div class="item el-block">不浮動-塊級元素</div>
     <div class="item left">左浮動</div>
     <div class="item el-block">不浮動-塊級元素</div>
   </div>
   

3. 浮動元素的排列位置，跟上一個元素有關系。如果上一個元素是標准流中的塊級元素，則浮動元素的頂部會和上一個元素的底部對齊；如果上一個元素是標准流中的行內塊元素或者行內元素，則浮動元素頂部會和上一個元素的頂部對齊，且會浮動到最左或最右側；如果上一個元素有浮動，則浮動元素頂部會和上一個元素的頂部對齊；

   

   <div class="container">
     <div class="item el-block">不浮動-塊級元素</div>
     <div class="item left">左浮動</div>
   </div>
   
   <div class="container">
     <div class="item el-inline-block">不浮動-行內塊元素</div>
     <div class="item left">左浮動</div>
   </div>
   
   <div class="container">
     <div class="item left">左浮動-1</div>
     <div class="item left">左浮動-2</div>
   </div>
   

4. 如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“卡住”

   

   <div class="container">    
     <div class="item left lg">左浮動-1</div>
     <div class="item left">左浮動-2</div>
     <div class="item left">左浮動-3</div>
   </div>
   

清除浮動

清除浮動主要為了解決父級元素因為子級元素浮動引起內部高度為0的問題

方法：

• 觸發浮動元素的父元素BFC，BFC詳見CSS系列 (04)：盒模型詳解

  父容器添加屬性：overflow:hidden

• after偽元素 +clear屬性

  在浮動元素后增加一個任意DOM元素，並設置css屬性 clear: both，即可清除浮動。but，這樣會添加一些無語義的DOM元素，不利於后期維護。

  聰明的你可能會想到after偽元素，利用CSS在元素內部的結束位創建一個元素，簡直棒呆

  注意：新創建的元素為行內元素，且必須要結合content屬性使用

  .clearfix:after { 
    content: '.';
    display: block;
    clear: both;
    width: 0px;
    height: 0px;
    visibility: hidden;
  }
  
  /* 兼容IE6、IE7，使用 zoom:1觸發 hasLayout */
  .clearfix {
    zoom: 1; 
  }
  

定位

常見定位模式

四種常用定位模式特性總結：

定位模式	是否脫標占有位置	是否可以使用邊偏移	移動位置基准	是否可以使用z-index
沒有定位，默認值static	不脫離標准流，占有位置	不可以	無法移動	不可以
相對定位relative	不脫離標准流，占有位置	可以	相對自身位置移動	可以
絕對定位absolute	脫離標准流，不占有位置	可以	相對於最近已定位父級移動，static除外	可以
固定定位fixed	脫離標准流，不占有位置	可以	相對於瀏覽器窗口移動	可以

子絕父相：

子元素設置絕對定位，父元素設置相對定位，此時子元素相對於父元素進行邊偏移，父元素相對於自身位置進行移動，這是一種常用的定位布局方式

開發中遇到的一種特殊布局：

絕對定位相對於其最近的已定位的父元素（ static除外 ）進行偏移，如果父元素為fixed，沒有設置寬高，top、bottom、left、right 都為0鋪滿全屏，設置margin-bottom為-5000px，子元素為absolute，bottom為0。此時，父元素剛好鋪滿全屏，子元素在瀏覽器窗口下邊緣下探至-5000px的地方消失不見

堆疊順序

z-index

對於定位元素（static除外），該z-index屬性指定，一是設置當前堆棧上下文中框的堆棧級別，二是創建一個新的堆疊上下文

特性：

1. z-index的默認屬性值是auto，注意0和auto不一樣，最后會講述他們的不同點

2. 只有相對定位、絕對定位、固定定位元素有此屬性，其余浮動、靜態定位元素都無此屬性

3. 在同一個堆疊上下文中的元素，z-index越高越靠近用戶。如果取值相同，則根據書寫順序，后來居上

4. 在不同堆疊上下文中的元素，不同堆疊上下文中的子元素不可能發生交叉，即：

   如果堆疊上下文Az-index值為500，堆疊上下文Bz-index值為400，則堆疊上下文A的所有子元素都在堆疊上下文B的子元素前面

下圖來自於子元素的z-index如何高於父元素的兄弟元素的z-index值？luckness用戶的評論

  <div class="div1">
     <div class="div1div1">
        <div class="div1div1div1"></div>
     </div>
  </div>
  <div class="div2">
    <div class="div2div1"></div>
  </div>

如何讓子元素顯示在父元素下方？

注意：不能給父元素z-index屬性設置具體數值，z-index:0 與 z-index:auto(默認值)是有區別的

• z-index為auto時，不會創建層疊上下文，子元素z-index為負數，則顯示在父元素下方，為非負數，則顯示在父元素上方

• z-index 變成數值時，就會創建一個層疊上下文，此時子元素永遠顯示在父元素上方，且受制於父元素的層疊順序

  father{
    position:relative;
    z-index: auto;
  }
  child{
    position:absolute;
    z-index: -1;
  }
  

參考文檔

子元素的z-index如何高於父元素的兄弟元素的z-index值？