CSS——06核心: 浮動

人生苦短，要學就只學有用的

【前端教學-CSS-1】

CSS核心--浮動float

1. 浮動(float)

目標

• 記憶
  • 能夠說出 CSS 的布局的三種機制
• 理解
  • 能夠說出普通流在布局中的特點
  • 能夠說出我們為什么用浮動
  • 能夠說出我們為什么要清除浮動
• 應用
  • 能夠利用浮動完成導航欄案例
  • 能夠清除浮動

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 什么是浮動(float)

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

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

作用

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

語法

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

選擇器 { float: 屬性值; }

特點；通過 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.3 浮動(float)小結

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

float —— 浮漏特

2. 清除浮動

2.1 為什么要清除浮動

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

• 總結：
  • 由于浮動元素不再占用原檔案流的位置，所以它會對后面的元素排版產生影響
  • 準確地說，并不是清除浮動，而是清除浮動后造成的影響

2.2 清除浮動本質

清除浮動本質：

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

2.3 清除浮動的方法

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

• 語法：

選擇器{clear:屬性值;}   clear 清除  

但是我們實際作業中， 幾乎只用 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. 影響下面布局了，我們就應該清除浮動了，

后面兩種偽元素清除浮動，大家暫且會使用就好， 深入原理，我們后面學完偽元素再講，

標籤：Html/Css

上一篇：如何利用border書寫三角形，建議考慮正方形

下一篇：11種常用css樣式之滑鼠、串列和尺寸樣式學習