✨
本文是我自己的網站上提供的更大系列文章的一部分。按此處了解有關 CSS 101：系列的更多資訊。完全免費！
歡迎來到過去的爆炸！在 Flexbox 和 Grid 像現代網頁設計的超級英雄一樣席捲全球之前，曾經有一段時間浮動和清除統治了 CSS 世界。如果您是網頁設計新手，您可能會想，「浮動和清除到底是什麼？我為什麼要關心？」好吧，請繫好安全帶，因為我們即將踏上 CSS 歷史的懷舊之旅。
劇透：今天你可能會發現一些很酷的技巧！
將 float 想像成 CSS 世界中的叛逆少年 - 總是突破界限並造成一些混亂。浮動體最初設計用於將文字包裹在圖像周圍，但聰明的開發人員很快就意識到他們也可以使用它們來創建佈局。
img {
float: left;
margin-right: 15px;
}
在上面的範例中，float: left;使圖像「浮動」到左側，允許文字環繞它。在 Flexbox 和 Grid 出現之前，浮動是建立多列佈局的熱門選擇。然而，它們可能有點挑剔，如果使用不小心，很容易導致佈局問題。
花車可能有點叛逆，但清除者是他們的維和者。清晰的屬性就像調解者，介入解決浮動可能造成的混亂。如果您使用浮動並發現元素重疊或行為不符合預期，則清除可以提供協助。
.clearfix::after {
content: "";
display: table;
clear: both;
}
透過使用上述CSS來新增clearfix類，您可以確保任何浮動元素都包含在其父容器中。這是防止那些惱人的佈局故障（元素似乎漂浮到深淵中）的好方法。
在 Flexbox 和 Grid 搶盡風頭之前，CSS 還有一些其他的技巧。以下是一些經典的版面技巧：
.box {
display: inline-block;
width: 30%;
margin-right: 2%;
}
.container {
display: table;
width: 100%;
}
.item {
display: table-cell;
width: 33%;
}
這些方法在很大程度上被現代佈局技術所掩蓋，但仍然可以讓我們一窺網頁設計的演變。
那麼，浮動和清除在現代網頁設計世界中仍然佔有一席之地嗎？絕對地！雖然 Flexbox 和 Grid 現在是建立佈局的首選工具，但浮動和清除在某些情況下仍然有用，例如簡單佈局或使用遺留程式碼時。
例如，您可以使用浮動來進行文字換行，或者當您想要以簡單的方式對齊少量元素時。但對於複雜的響應式佈局，Flexbox 和 Grid 是您最好的朋友。
浮動、清除和其他遺留佈局技術可能看起來像是過去的遺物，但它們是 CSS 豐富歷史的一部分。了解它們可以為您奠定堅實的基礎，並幫助您欣賞現代佈局系統的強大功能。另外，了解這些老派技巧在處理較舊的專案或奇怪的設計挑戰（或那些可怕的面試回合）時會派上用場。
編碼愉快！
✨
噓！如果您喜歡所讀內容，請按此處查看 CSS 101：系列。完全免費！
以上是CSS 佈局技術 - 浮動、清除和傳統佈局：老派酷炫的詳細內容。更多資訊請關注PHP中文網其他相關文章！
