CSS基礎——浮動（float）【學習筆記】

qq_40794986發表於2020-11-21
CSS筆記

1. 浮動(float)

1.1 CSS 佈局的三種機制

網頁佈局的核心——就是用 CSS 來擺放盒子。

CSS 提供了 3 種機制來設定盒子的擺放位置，分別是普通流（標準流）、浮動和定位，其中：

  1. 普通流（標準流）
    • 塊級元素會獨佔一行，從上向下順序排列；
      • 常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
    • 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
      • 常用元素：span、a、i、em等
  2. 浮動
    • 讓盒子從普通流中浮起來,主要作用讓多個塊級盒子一行顯示。
  3. 定位
    • 將盒子定在瀏覽器的某一個位置——CSS 離不開定位，特別是後面的 js 特效。

1.2 為什麼需要浮動？

思考題：

我們首先要思考以下2個佈局中最常見的問題？

  1. 如何讓多個盒子(div)水平排列成一行？

  2. 如何實現盒子的左右對齊？

雖然我們前面學過行內塊（inline-block） 但是他卻有自己的缺陷：

  1. 它可以實現多個元素一行顯示，但是中間會有空白縫隙，不能滿足以上第一個問題。
  2. 它不能實現以上第二個問題，盒子左右對齊

因為一些網頁佈局要求，標準流不能滿足我們的需要了，因此我們需要浮動來完成網頁佈局。

1.3 什麼是浮動(float)

概念：元素的浮動是指設定了浮動屬性的元素會

  1. 脫離標準普通流的控制
  2. 移動到指定位置。

作用

  1. 讓多個盒子(div)水平排列成一行，使得浮動成為佈局的重要手段。
  2. 可以實現盒子的左右對齊等等…
  3. 浮動最早是用來控制圖片，實現文字環繞圖片的效果。

在這裡插入圖片描述

語法

在 CSS 中，通過 float 中文， 浮 漏 特 屬性定義浮動，語法如下：

選擇器 { float: 屬性值; }
屬性值描述
none元素不浮動（預設值）
left元素向左浮動
right元素向右浮動

浮動口訣
float ----- 浮 漏 特

1). 浮動口訣之 浮

浮動——浮~浮~浮~~~漂浮在普通流的上面。 脫離標準流。 俗稱 “脫標”

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

小結：

  • float 屬性會讓盒子漂浮在標準流的上面，所以第二個標準流的盒子跑到浮動盒子的底下了。

2). 浮動口訣之 漏

浮動——漏漏漏~ 浮動的盒子，把自己原來的位置漏給下面標準流的盒子，就是不佔有原來位置，是脫離標準流的，我們俗稱 “脫標”。

.box1 {
    width: 200px;
    height: 200px;
    background-color: rgba(255, 0, 0, 0.5);
    /* 讓第 1 個盒子漂浮起來，不佔位置 */
    float: left;
}
.box2 {
    width: 150px;
    height: 300px;
    background-color: skyblue;
}

所以，box2下面的其實就是跑到box1盒子下面了， 被box1給壓住了，遮擋起來了

3). 浮動口訣之 特

浮動——特性 float屬性會改變元素display屬性。

任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。 生成的塊級框和我們前面的行內塊極其相似。

體驗案例——div 水平排列

div {

    width: 200px;

    height: 200px;

    background-color: pink;

    /* 轉換為行內塊元素，可以水平顯示，不過 div 之間有間隙，不方便處理 */

    /* display: inline-block; */

    /* 設定浮動屬性，可以讓 div 水平排列，並且沒有間隙 */

    float: left;
}

.two {

    background-color: hotpink;

}

注意： 浮動的元素互相貼靠一起的，但是如果父級寬度裝不下這些浮動的盒子， 多出的盒子會另起一行對齊

1.4 浮動(float)小結

我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 因為這是我們最常見的一種佈局方式

float —— 浮漏特

特點說明
浮加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面。
漏加了浮動的盒子是不佔位置的，它原來的位置漏給了標準流的盒子。
特特別注意：浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙

1.5 浮動(float)的應用（重要）

浮動和標準流的父盒子搭配

我們知道，浮動是脫標的，會影響下面的標準流元素，此時，我們需要給浮動的元素新增一個標準流的父親，這樣，最大化的減小了對其他標準流的影響。

一個完整的網頁，是 標準流 + 浮動 + 我們後面要講的定位 一起完成的。

浮動應用案例

導航欄案例

注意，實際重要的導航欄中，我們不會直接用連結a 而是用 li 包含連結(li+a)的做法。

  1. li+a 語義更清晰，一看這就是有條理的列表型內容。
  2. 如果直接用a，搜尋引擎容易辨別為有堆砌關鍵字嫌疑（故意堆砌關鍵字容易被搜尋引擎有降權的風險），從而影響網站排名

1.6 浮動(float)的擴充套件

1). 浮動元素與父盒子的關係

  • 子盒子的浮動參照父盒子對齊

  • 不會與父盒子的邊框重疊，也不會超過父盒子的內邊距

    ​

2). 浮動元素與兄弟盒子的關係

在一個父級盒子中，如果前一個兄弟盒子是：

  • 浮動的，那麼當前盒子會與前一個盒子的頂部對齊；
  • 普通流的，那麼當前盒子會顯示在前一個兄弟盒子的下方。

浮動只會影響當前的或者是後面的標準流盒子，不會影響前面的標準流。

建議

如果一個盒子裡面有多個子盒子，如果其中一個盒子浮動了，其他兄弟也應該浮動。防止引起問題

2. 清除浮動

2.1 為什麼要清除浮動

因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不佔有位置，最後父級盒子高度為0，就影響了下面的標準流盒子。

  • 總結：
    • 由於浮動元素不再佔用原文件流的位置，所以它會對後面的元素排版產生影響
    • 準確地說，並不是清除浮動，而是清除浮動後造成的影響

2.2 清除浮動本質

​ 清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了

2.3 清除浮動的方法

在CSS中，clear屬性用於清除浮動，在這裡，我們先記住清除浮動的方法，具體的原理，等我們學完css會再回頭分析。

  • 語法：
選擇器{clear:屬性值;}   clear 清除
屬性值描述
left不允許左側有浮動元素（清除左側浮動的影響）
right不允許右側有浮動元素（清除右側浮動的影響）
both同時清除左右兩側浮動的影響

但是我們實際工作中， 幾乎只用 clear: both;

1).額外標籤法(隔牆法)

是W3C推薦的做法是通過在浮動元素末尾新增一個空的標籤例如 <div style=”clear:both”></div>，或則其他標籤br等亦可。
  • 優點： 通俗易懂，書寫方便
  • 缺點： 新增許多無意義的標籤，結構化較差。

2).父級新增overflow屬性方法

可以給父級新增： overflow為 hidden| auto| scroll  都可以實現。

優點： 程式碼簡潔

缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。

3).使用after偽元素清除浮動

:after 方式為空元素額外標籤法的升級版，好處是不用單獨加標籤了

使用方法：

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   

 .clearfix {*zoom: 1;}   /* IE6、7 專有 */
  • 優點： 符合閉合浮動思想 結構語義化正確
  • 缺點： 由於IE6-7不支援:after，使用 zoom:1觸發 hasLayout。
  • 代表網站： 百度、淘寶網、網易等

4).使用雙偽元素清除浮動

使用方法：

.clearfix:before,.clearfix:after { 
  content:"";
  display:table; 
}
.clearfix:after {
 clear:both;
}
.clearfix {
  *zoom:1;
}
  • 優點： 程式碼更簡潔
  • 缺點： 由於IE6-7不支援:after，使用 zoom:1觸發 hasLayout。
  • 代表網站： 小米、騰訊等

2.4 清除浮動總結

什麼時候用清除浮動呢？

  1. 父級沒高度
  2. 子盒子浮動了
  3. 影響下面佈局了，我們就應該清除浮動了。
清除浮動的方式優點缺點
額外標籤法（隔牆法）通俗易懂，書寫方便新增許多無意義的標籤，結構化較差。
父級overflow:hidden;書寫簡單溢位隱藏
父級after偽元素結構語義化正確由於IE6-7不支援:after，相容性問題
父級雙偽元素結構語義化正確由於IE6-7不支援:after，相容性問題

相關文章