浮動(float)

CSS 佈局的三種機制

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

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

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

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

什麼是浮動(float)

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

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

作用

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

語法

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

選擇器 { float: 屬性值; }

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

小結：

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

.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給壓住了，遮擋起來了

div {

    width: 200px;

    height: 200px;

    background-color: pink;

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

    /* display: inline-block; */

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

    float: left;
}

.two {

    background-color: hotpink;

}
 

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

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

浮動元素與父盒子的關係

• 子盒子的浮動參照父盒子對齊
• 不會與父盒子的邊框重疊，也不會超過父盒子的內邊距
  
  ​

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

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

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

清除浮動

為什麼要清除浮動

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

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

清除浮動本質

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

清除浮動的方法

在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。

• 代表網站： 小米、騰訊等

清除浮動總結

pink老師告訴你我們以後什麼時候用清除浮動呢？

1. 父級沒高度
2. 子盒子浮動了
3. 影響下面佈局了，我們就應該清除浮動了。