[快速入門前端 28] Float 浮動

css 前端新手村 float 清除浮動

Doris 2023-06-11 17:53:12 ‧ 1714 瀏覽

分享至

Float 浮動

Float 在設計之初是用來呈現文繞圖的效果，可以將元素指定為靠左或靠右浮動，在 CSS 中，所有的元素都可以加入 float 屬性。

範例：
未使用 float 時，正常的圖片 + 文字效果

在圖片元素中加 float: left 將圖片向左浮動，出現文繞圖效果

浮動元素的特性

擁有 float 屬性的元素被稱為浮動元素，而成為浮動元素後也會改變元素本身的特性，下面就讓我們來看看浮動元素有哪些與一般元素不同的地方吧！

block 元素浮動後不會獨佔一行，需由內容撐開或者用 CSS 設定寬高。如下圖，紅色 div 浮動後失去原本獨佔一行的特性
元素浮動後會像浮在空中般脫離原本的元素排列，後面的元素會跑到浮動元素下方造成排版問題
當我們把綠色 div 的高度拉高，會發現其實綠色元素有一部分是被紅色浮動元素蓋住的，也就是說在元素浮動後不會佔據原本元素排列的空間，進而導致後方的元素往前移至浮動元素下方
浮動後的元素脫離原本的文檔排列 (浮起來)，當父元素中只有浮動元素時，浮動元素無法撐開父元素的高度
以一個藍色父元素 div 包裹三個橘色子 div 的結構為例，未浮動時子元素佔據一行，排列如下：

當我們將三個子元素都加入 float: left 時，子元素失去原有特性變為同一行，且無法撐開父元素的高度
浮動後的元素可以設定寬度和高度：inline 元素在浮動後可以指定寬高
浮動後不會出現之前提過的 Margin 合併、塌陷問題
浮動元素雖然脫離原本的元素排列，但仍受父元素寬度的限制，若超過則自動跑到下一行

常見的浮動排版

雖然 float 在設計出是為了文繞圖效果，但在實際開發中也常被用來排版，下面來看幾個例子：

需要將區塊元素放在同一行時，將區塊元素加入 float 屬性就可以使他們在同一行靠左或靠右排列
```
 .item {
     width: 200px;
     height: 200px;
     background-color: lightgray;
     margin: 10px;
     float: left;
 }
```
文繞圖內容，常用於文章內容和圖片排版
左右版面設計
在開發中我們可能會遇到下圖這樣的頁面，除了上方 header 外內容的部分可能分為左側欄和主要內容，我們需要將下面兩個區塊排列在一行，這時候就可以加入 float: left 達到目的。

清除浮動

前面我們說到當元素成為浮動元素後會引發一些排版的問題，例如無法撐開父元素，或是會影響到後面的非浮動元素等。而清除浮動 (clear float) 可以 清除某元素前面的浮動，也就是說若我們在浮動元素後面加一個負責清除浮動狀態的元素，即可以解決因浮動而產生的問題，那實際上要如何操作呢？

語法：

clear: left; /* 只清除前面為 float: left 的浮動 */
clear: right; /* 只清除前面為 float: right 的浮動 */
clear: both; /* 清除前面所有浮動 */

清除浮動的方法：
1. 在所有浮動元素後新增一個空白的區塊元素，並加入 clear float 屬性

.father {
     background-color: lightblue;;
 }
 .item {
     background-color: lightgray;
     width: 200px;
     height: 200px;
     margin: 10px;
     float: left;
 }
 .clear {
     clear: both;
 }

<body>
     <div class="father">
         <div class="item"></div> <!-- 浮動元素 -->
         <div class="item"></div> <!-- 浮動元素 -->
         <div class="item"></div> <!-- 浮動元素 -->
         <div class="clear"></div> <!-- 加入空的元素並設定 clear: both 清除浮動 -->
     </div>
 </body>

2. 在父元素中新增一個 after 偽元素並加入 clear float 屬性
若父元素中浮動元素後沒有其他子元素，則可以利用偽元素來加入清除浮動，其實原理是一樣的，只是不用另外在寫一個空的元素。

.father {
     background-color: lightblue;;
 }
 .item {
     background-color: lightgray;
     width: 200px;
     height: 200px;
     margin: 10px;
     float: left;
 }
 .father::after {
     content: '';
     display: block; /* 一定要將 display 改為 block，否則無法清除 */
     clear: both;
 }

<body>
     <div class="father">
         <div class="item"></div> <!-- 浮動元素 -->
         <div class="item"></div> <!-- 浮動元素 -->
         <div class="item"></div> <!-- 浮動元素 -->
     </div>
 </body>

Tips: