CSS基礎——浮動(float)【學習筆記】

qq_40794986發表於2020-11-21

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,相容性問題

相關文章