文章目錄

• 1. 浮動 Float
• 2. 父級邊框塌陷問題
• 3. 相對定位
• 4. 絕對定位
• 5. 固定定位
• 6. z-index

1. 浮動 Float

• 定義：是元素的一種屬性，設置了浮動屬性的元素會脫離標準文檔流的控制，移動到其父元素中指定位置的過程，可以讓任何盒子在一行排列，用浮動來布局。
• 標準文檔流：文檔流指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。并最終窗體自上而下分成一行，并在每行中從左至右的順序排放元素。造成空白折疊、高矮不齊，底邊對齊以及自動換行等現象。
• 格式：選擇器 { float：屬性值；}
  屬性值：left——元素向左浮動；right——元素向右浮動；none——元素不浮動（默認值）
• 特性：①脫離標準流，不占位置，只有左右浮動；②一浮動就創建一個包含塊級的概念，在外邊加一個父盒子，再對齊；③若上一個元素浮動則與其在頂部對齊，若上一個元素是標準流則上下排列。
• 塊級元素：獨占一行 如h1~h6 p div 列表…
  行內元素：不獨占一行 如span a img strong…
  行內元素可以被包含在塊級元素中，反之則不可以
• display：block 顯示為塊元素 / inline 顯示為行內元素 / inline-block 顯示為塊元素，但是可以內聯，在一行 / none 元素不會被顯示
• 實例演示
  
  

2. 父級邊框塌陷問題

• clear：清除浮動元素
  clear: right; 右側不允許有浮動元素
  clear: left; 左側不允許有浮動元素
  clear: both; 兩側不允許有浮動元素
  clear: none; 無浮動元素

解決方案：
（1）增加父級元素的高度

（2）增加一個空的div標簽，清除浮動

（3）在父級元素中增加一個 overflow: hidden;

（4）父類添加一個偽類：after

• 小結
  （1）設置父元素的高度：簡單，元素假設有了固定的高度，就會被限制；
  （2）浮動元素后面增加空div ：簡單，代碼中盡量避免空；
  （3）overflow：簡單，下拉的一些場景避免使用；
  （4）父類添加一個偽類：after（推薦）：寫法稍微復雜一點，但是沒有副作用。

3. 相對定位

• position屬性常用值：static——自動定位(默認)；relative——相對定位；absolute——絕對定位；fixed——固定定位
• position: relative;
• 偏移屬性：top——頂部偏移量；bottom——底部偏移量；left——左側偏移量；right——右側偏移量
• 相對于原來的位置，進行指定的偏移，相對定位的話，它任然在標準文檔流中，原來的位置會被保留。
• 實例代碼
  
• 運行結果
  

4. 絕對定位

• position: absolute
• 定位：基于xxx定位，上下左右(top、bottom、left、right)
  (1) 沒有父級元素定位的前提下，相對于瀏覽器定位；
  (2) 假設父級元素存在定位，我們通常會相對于父級元素進行偏移；
  (3) 在父級元素范圍內移動。
  相對于父級或瀏覽器的位置，進行指定的偏移，絕對定位的話，它不在在標準文檔流中，原來的位置不會被保留。
• 實例代碼
  
• 運行結果
  

5. 固定定位

• position: fixed
• 元素的位置相對于瀏覽器窗口是固定位置
  

6. z-index

• 元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素
  z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）
  z-index--------設置元素的堆疊順序--------值:number/auto
  z-index: 默認是0,最高無限制

• opacity 透明度的屬性值從0.0 - 1.0。值越小，使得元素更加透明。它是針對整個元素的，一旦設置了透明度，則背景色，文字顏色都有透明度。

• 實例代碼
  

• 運行結果
  

總結

以上是生活随笔為你收集整理的前端(六)——CSS之浮动和定位的全部內容，希望文章能夠幫你解決所遇到的問題。

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