CSS - Float屬性：初學者指南

你好，未來的CSS巫師們！今天，我們將要深入CSS float屬性的神奇世界。別擔心如果你之前從未寫過一行代碼 - 到了這個教學的結尾，你將會像專家一樣讓元素飄浮！

CSS - Float

Float屬性是什麼？

在我們跳進深水區之前，讓我們從基礎開始。Float屬性就像是CSS中的一根魔杖，讓元素能夠飄浮到容器的左邊或右邊。想像你在房間裡布置家具 - float屬性讓你將東西推到旁邊，為其他元素流動留出空間。

可能的值

Float屬性可以接受多個值，每個都有其特殊的能力：

值	描述
left	將元素飄浮到左邊
right	將元素飄浮到右邊
none	元素不飄浮（默認）
inherit	從父元素繼承float值

適用的範圍

Float屬性可以應用於大多數HTML元素，但它最常被用於：

圖片
Divs
段落
標題

語法

這裡是使用float屬性的基本語法：

選擇器 {
float: 值;
}

例如：

img {
float: left;
}

這會讓你頁面上所有的圖片都向左飄浮。

CSS Float - 相等寬度的列

讓我們從一個實際的例子開始。想像你正在為一家烘焙店創建網站，並且想要並排顯示三種糕點。這裡是如何使用float來創建相等寬度的列：

<div class="pastry-container">
<div class="pastry">羊角麵包</div>
<div class="pastry">泡芙</div>
<div class="pastry">馬卡龍</div>
</div>

.pastry-container {
width: 100%;
}

.pastry {
float: left;
width: 33.33%;
padding: 15px;
box-sizing: border-box;
}

在這個例子中，我們將每個糕點div向左飄浮並給它們一個33.33%的寬度（100%除以3）。box-sizing: border-box保證內邊距包含在寬度計算中。

CSS Float - 相等高度的列

現在，讓我們說你想讓這些列具有相等的高度，無論內容如何。我們可以使用一個小技巧，使用內邊距和邊距：

.pastry-container {
overflow: hidden;
}

.pastry {
float: left;
width: 33.33%;
padding-bottom: 500px;
margin-bottom: -500px;
}

這通過添加一個大的padding-bottom和一個等值的負邊距來創造相等高度列的錯覺。

CSS Float - 圖片並排放置

讓我們為我們的烘焙店網站添加一些令人垂涎的糕點圖片：

<div class="image-container">
<img src="croissant.jpg" alt="羊角麵包">
<img src="eclair.jpg" alt="泡芙">
<img src="macaron.jpg" alt="馬卡龍">
</div>

.image-container {
width: 100%;
}

.image-container img {
float: left;
width: 33.33%;
padding: 5px;
box-sizing: border-box;
}

這會讓我們的糕點圖片並排放置，每個佔容器的三分之一寬度。

CSS Float - 響應式盒子

但如果我們希望我們的佈局更加靈活呢？這時候flexbox出場了，它是現代CSS佈局中的超級英雄：

.pastry-container {
display: flex;
flex-wrap: wrap;
}

.pastry {
flex: 1 0 300px;
margin: 5px;
}

這創造了一個靈活的佈局，其中每個糕點盒子將至少300px寬，並會長大到填滿可用空間。

CSS Float - 导航菜單

Floats經常被用來創建水平導航菜單。讓我們為我們的烘焙店快速做出一個菜單：

<nav>
<ul>
<li><a href="#home">首頁</a></li>
<li><a href="#menu">菜單</a></li>
<li><a href="#about">關於我們</a></li>
<li><a href="#contact">聯繫我們</a></li>
</ul>
</nav>

nav ul {
list-style-type: none;
padding: 0;
}

nav li {
float: left;
}

nav a {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #333;
}

這創造了一個水平導航菜單，每個項目都向左飄浮。

CSS Float - 網頁佈局

Floats可以用來創建整個網頁佈局。這裡是一個簡單的兩列佈局：

<div class="container">
<header>歡迎來到我們的烘焙店</header>
<nav>
<!-- 導航項目在這裡 -->
</nav>
<main>
<article>我們的故事</article>
<aside>今日特別推薦</aside>
</main>
<footer>聯繫我們</footer>
</div>

.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
}

header, nav, footer {
width: 100%;
clear: both;
}

main {
width: 100%;
}

article {
float: left;
width: 70%;
}

aside {
float: right;
width: 25%;
}

這創造了一個有主內容區和側邊欄的佈局。

CSS Float - 段落

Floats可以用來讓文字環繞圖片：

<div class="content">
<img src="baker.jpg" alt="我們的大師烘焙師" class="float-left">
<p>見見我們的大師烘焙師，Chef Pierre。擁有超過30年的經驗...</p>
</div>

.float-left {
float: left;
margin-right: 15px;
}

這會讓文字環繞我們大師烘焙師的圖片。

CSS Float - 圖片與邊距

為飄浮的圖片添加邊距可以增加可讀性：

img {
float: left;
margin: 0 15px 15px 0;
}

這為我們的飄浮圖片添加了一些間距。

CSS Float - 不飄浮

有時候，你需要防止元素飄浮。clear屬性來拯救：

.no-float {
clear: both;
}

這保證了帶有no-float類的元素將出現在任何飄浮元素之下。

CSS Float - 向左或向右飄浮

記住，你可以將元素向左或向右飄浮：

.float-left {
float: left;
}

.float-right {
float: right;
}

CSS Float - 圖片重疊

要小心！如果沒有足夠的空間，飄浮的元素可能會重疊。你可以通過正確的清除來防止這種情況：

.clearfix::after {
content: "";
display: table;
clear: both;
}

將這個類添加到飄浮元素的父容器中，以防止重疊。

CSS Float - 圖片不鄰接

有時候，你希望飄浮的圖片保持原始順序：

img {
float: left;
clear: left;
}

這確保每個圖片都從新行開始。

CSS Float - 在前一个元素下方飄浮

要讓元素在它們的前一个元素下方飄浮：

.float-below {
clear: both;
float: left;
}

這清除之前的任何飄浮，然後將元素飄浮。

CSS Float - 到新行

要強制元素在飄浮元素後面到達新行：

.new-line {
clear: both;
}

CSS Float - 相關屬性

這裡是一個float相關屬性和值的表格：

屬性	值
float	left, right, none, inherit
clear	left, right, both, none, inherit
overflow	visible, hidden, scroll, auto

這就是你們的，各位！你剛剛踏出了進入CSS飄浮世界的第一步。記住，熟能生巧，所以不要害怕嘗試這些技巧。在你還沒有意識到之前，你將會創造出讓最經驗豐富的網頁設計師都會感到驕傲的漂亮、基於飄浮的佈局。開心地編程吧！

Credits: Image by storyset