CSS - 清除浮動：初学者的全面指南

你好，有抱負的網頁開發者！今天，我們將深入一個可能一開始聽起來有些神秘的話題：CSS 清除浮動（Clearfix）。如果你是新手，別擔心；我會一步步分解，就像我過去幾年來對無數學生做的一樣。所以，來一杯咖啡（或者如果你喜歡，一杯茶），我們一起開始這個旅程吧！

CSS - Clearfix

清除浮動是什麼，我們為什麼需要它？

在我們深入細節之前，讓我們先了解清楚浮動到底是什麼。想像你正在試圖整理一個雜亂的房間。你有一些高的物品，一些短的物品，還有一些就是不肯老老实實待在原地的。這在網頁設計中使用浮動元素時也會發生類似情況。它們可能會導致佈局問題，使我們的網頁看起來像那個雜亂的房間。清除浮動就是我們的清理工具——它幫助我們保持一切整齊有序。

CSS 清除浮動 - 使用 overflow 和 float 屬性

讓我們從最常見的清除浮動技巧之一開始。這種方法同時使用了 overflow 和 float 屬性。

<div class="clearfix">
<div class="float-left">我正在左側浮動！</div>
<div class="float-right">我正在右側浮動！</div>
</div>

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

.float-left {
float: left;
}

.float-right {
float: right;
}

在這個例子中，我們使用 ::after 權謬元素在我們的容器後面創建一個隱藏元素。這個隱藏元素清除左右兩側的浮動，確保我們的容器擴展以包含所有浮動元素。

代碼解釋

.clearfix::after：這個選擇器針對的是在清除浮動容器之後創建的權謬元素。
content: "";：我們添加空內容來創建權謬元素。
display: table;：這創建了一個像表格一樣的結構，這有助於清除浮動。
clear: both;：這是神奇的一行，它清除左右兩側的浮動。

CSS 清除浮動 - 使用 overflow 屬性

另一種方法是僅使用 overflow 屬性。這種方法更簡單，但有一些局限性。

<div class="clearfix-overflow">
<div class="float-left">仍然在左側浮動！</div>
<div class="float-right">我仍然在右側！</div>
</div>

.clearfix-overflow {
overflow: auto;
}

.float-left, .float-right {
width: 45%;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

它是如何工作的

overflow: auto; 創建了所謂的 "塊格式化上下文"。這就像創造了一個新的環境，其中浮動元素被完全包含。但是要小心——如果內容太多，這種方法有時會創造出不需要的滾動條。

CSS 清除浮動 - 使用 height 屬性

現在，讓我們看看一種可能看起來直觀但帶有重大缺陷的方法。

<div class="clearfix-height">
<div class="float-left">又是在左側！</div>
<div class="float-right">一如既往地在右側！</div>
</div>

.clearfix-height {
height: 100px; /* 或者任何固定的身高 */
}

.float-left, .float-right {
width: 45%;
}

.float-left {
float: left;
}

.float-right {
float: right;
}

為什麼這不是理想的選擇

雖然設置固定的身高可以包含浮動元素，但它不靈活。如果你的內容增長了怎麼辦？你將不得不不斷調整身高。這就像為一個長大的孩子買鞋一樣——你總是會落在後面！

CSS 清除屬性

最後，讓我們來談談 clear 屬性本身。這是所有清除浮動技巧的基礎。

<div class="container">
<div class="float-left">我正在左側浮動！</div>
<div class="float-right">我正在右側浮動！</div>
<div class="clear-both"></div>
</div>

.float-left {
float: left;
width: 45%;
}

.float-right {
float: right;
width: 45%;
}

.clear-both {
clear: both;
}

了解清除屬性

clear 屬性可以接受多個值：

left：清除左側浮動
right：清除右側浮動
both：清除左右兩側的浮動
none：默認值，允許兩側都有浮動元素

這裡有一個總結這些值的表格：

值	描述
left	清除左側浮動
right	清除右側浮動
both	清除左右兩側的浮動
none	默認值，允許兩側浮動

總結

好了，各位！我們已經穿越了 CSS 清除浮動的世界。記住，就像網頁開發中的許多事物一樣，沒有一種萬能的解決方案。你選擇的方法取決於你的特定佈局需求。

正如我總是告訴我的學生，真正理解這些概念的最好方法是實驗。嘗試每種方法，弄壞它們，修理它們，並看看它們在不同情況下的工作方式。這樣你才能對不同情況下什麼方法最有效發展出直覺。

持續編程，持續學習，並記得在過程中玩得開心。畢竟，網頁開發既是科學，也是藝術。快樂清除吧！

Credits: Image by storyset