CSS布局是網頁設計中至關重要的一部分，它決定了網頁上各個元素的位置、大小和對齊方式。達成良好的布局不僅關乎網頁的外觀，還關乎用戶體驗和互動。今天我會介紹一些重要的技術和觀念。

1.區塊元素、行內元素

CSS將HTML元素分為區塊元素和行內元素，區塊元素如果不特別調整的話，就會佔據整個父元素的寬度，也就是width="100"，常見的块級元素包括div、p
而行內元素僅佔據所需的寬度，需要內部的內容擴大空間，而行內元素包括span、a等。

2.盒子模型(box-model)

盒子模型描述了每個HTML元素周圍的區域，它包括內容(content)、內邊距(padding)、邊框(border)和外邊距(margin)。這些元素可以用CSS屬性（如width、height、padding和margin）來控制，以實現所需的佈局效果。
順帶提一點，邊框(border)的預設是向外生長的，容易影響排版，要讓他改變向內的方法就得用到box-sizing這個屬性
這個屬性預設是content-box;如果把它改成border-box的話，他會考慮padding之類的東西考慮進去，自動內縮。

3.浮動和清除浮動

浮動（Float）和清除浮動（Clear Float）是CSS中常用的佈局技術，它們主要用於實現多個元素的水平對齊和多列佈局。
浮動（Float）
浮動是一種CSS屬性，它允許元素向左或向右移動，直到它遇到包含它的容器的邊緣或其他浮動元素為止。浮動元素會繼續佔據文檔流中的空間，但其他內容會繞過浮動元素。
浮動常用於實現多列佈局，如將文本圍繞圖片或創建導航選單等。例如，如果你希望兩個元素並排顯示，可以使用以下CSS代碼：

.left {
    float: left;
}

.right {
    float: right;
}

要注意的是，浮動元素需要特別小心，因為它們可能導致佈局問題，例如父元素的高度坍塌（父元素無法正確計算內容高度）。為了解決這些問題，需要使用清除浮動。
清除浮動（Clearfix）
清除浮動是一種技術，用於解決由浮動元素引起的佈局問題。通常，當父元素包含浮動子元素時，父元素的高度無法自動擴展以容納浮動元素，這可能導致內容被截斷或重疊。

清除浮動的常見方法是使用Clearfix技巧。這是一種在父元素上應用特殊的CSS樣式以清除浮動的方法。以下是Clearfix的示例：

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

在上面的程式碼中，::after偽元素被添加到包含浮動元素的父元素中，它的content屬性被設置為空字符串，display屬性設置為table，clear屬性設置為both。這將強制父元素清除浮動，使其高度正確計算，以避免佈局問題。
總之，浮動和清除浮動是CSS佈局的基本技術，它們可以用於實現多列佈局和元素的對齊。然而，要小心使用浮動，並確保使用Clearfix或其他方法來解決可能引起的佈局問題，以確保你的網頁正確顯示和呈現。

有關布局的東西真的很多，所以大概會分2到3篇來寫,謝謝各位。