CSS 佈局技術 - 浮動、清除和傳統佈局：老派酷炫

✨
本文是我自己的網站上提供的更大系列文章的一部分。按此處了解有關 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 還有一些其他的技巧。以下是一些經典的版面技巧：

• Inline-Block：建立水平佈局的簡單方法。將元素設為 display: inline-block;，您可以將它們並排排列，而不需要浮動。

.box {
    display: inline-block;
    width: 30%;
    margin-right: 2%;
}

• 表格版面：是的，表格不只用於表格資料！您可以使用 display: table;、display: table-row; 和 display: table-cell;來建立類似網格的版面。

.container {
    display: table;
    width: 100%;
}

.item {
    display: table-cell;
    width: 33%;
}

這些方法在很大程度上被現代佈局技術所掩蓋，但仍然可以讓我們一窺網頁設計的演變。

現代應用：新舊融合

那麼，浮動和清除在現代網頁設計世界中仍然佔有一席之地嗎？絕對地！雖然 Flexbox 和 Grid 現在是建立佈局的首選工具，但浮動和清除在某些情況下仍然有用，例如簡單佈局或使用遺留程式碼時。

例如，您可以使用浮動來進行文字換行，或者當您想要以簡單的方式對齊少量元素時。但對於複雜的響應式佈局，Flexbox 和 Grid 是您最好的朋友。

總結一下

浮動、清除和其他遺留佈局技術可能看起來像是過去的遺物，但它們是 CSS 豐富歷史的一部分。了解它們可以為您奠定堅實的基礎，並幫助您欣賞現代佈局系統的強大功能。另外，了解這些老派技巧在處理較舊的專案或奇怪的設計挑戰（或那些可怕的面試回合）時會派上用場。

編碼愉快！

✨
噓！如果您喜歡所讀內容，請按此處查看 CSS 101：系列。完全免費！

以上是CSS 佈局技術 - 浮動、清除和傳統佈局：老派酷炫的詳細內容。更多資訊請關注PHP中文網其他相關文章！