CSS Layout - 浮動

float 是 CSS 中的一個屬性，用於將元素從正常的文檔流中移出，並使其向左或向右對齊。這個屬性在早期的網頁排版中非常普遍，但隨著 Flexbox 和 Grid 的出現，使用頻率已逐漸減少。

文檔流 (Normal Flow)

是指瀏覽器的正常排版規則，包含 區塊元素 會往下延伸，杭內元素 會並排直到沒有空間才會往下延伸。

float

• none: 元素不浮動，保持在正常文檔流，預設值。
• left: 元素浮動到容器的左側，後續內容會環繞在右側。
• right: 元素浮動到容器的右側，後續內容會環繞在左側。
• inherit: 繼承父元素的 float 屬性值。

WARNING

浮動元素會脫離正常文檔流，導致版面錯亂。

繞圖排文

以下是一個簡單的例子，展示如何使用 float 讓圖片浮動並讓文字環繞它。

解決父元素高度遺失的問題

clear

當使用 float 時，後續的元素會受到浮動元素的影響，導致父層容器的高度塌陷。為了解決這個問題，可以使用 clear 屬性來解決這個問題，讓元素恢復到正常的流向中。

• none: 不清除浮動，元素可以與浮動元素並排，預設值。
• left: 清除左側的浮動，元素會移到左側浮動元素的下方。
• right: 清除右側的浮動，元素會移到右側浮動元素的下方。
• both: 同時清除左右兩側的浮動，元素會移到所有浮動元素的下方。
• inherit: 繼承父元素的 clear 屬性值。

在 HTML 增加空元素

早期瀏覽器還不是很強大時，會在 HTML 文件中加入 <span> 元素，且利用此元素來進行 clear 屬性的操作。如下方所示:

TIP

clear 屬性可清除左側或右側，一般來說，會建議使用 both 來同時清除兩側。這樣一來，就不用顧慮前面的元素是設定 float: left; 或 float: right;。

使用偽元素

在複雜的版面中，到處充斥著水平排列的呈現，相對地，也就會產生出無數個空元素。這些元素只是為了讓排版正常而存在，對於使用者閱讀網頁內容並無特別的意義，無形中也會讓 HTML 文件愈來愈肥大。隨著瀏覽器的進步，我們便可以使用 偽元素 來解決空元素的問題。如果對於 偽元素 不熟悉可以複習一下。