float 漂浮
：跳脫出父類別的框框，至左或至右

"早期的項目或需要兼容舊版瀏覽器"的情況下，元素浮動使用float。
不用完全搞懂，教學後續會用別的來取代這個屬性。
只需要大概了解就好，剩下就是實作。

簡單介紹：
用於定位元素的屬性，允許元素浮動在其容器中的左側或右側。
元素設置了float屬性後，從"正常文檔流中脫離出來"，根據設置的方向浮動到容器的一側。

float屬性的優點：

1. 允許將元素浮動到頁面的某一側，從而實現多個元素的並排佈局。
2. 允許在文本環繞周圍，使內容封裝在固定的區域中。
3. 可以實現一些特定的佈局需求，如實現多列佈局或響應式佈局。

float屬性的缺點和問題：

1. 可能導致父元素高度塌陷，需要進行清除浮動來解決。
2. 可能會覆蓋其他元素或與其他元素重疊，需通過清除浮動或設置適當的寬度來避免。
3. 浮動元素對父元素的尺寸計算不准確，可能導致佈局出現問題。
4. 浮動元素的佈局比較脆弱，容易受到其他樣式或內容的影響而導致佈局錯亂。
5. 需要考慮處理浮動元素的高度和位置，可能需要使用clearfix等技術來解決問題。

float屬性已經被更先進的佈局方式如 flexbox 和grid所取代。
佈局方式更靈活、簡單，並可避免float佈局帶來的一些問題。

CSS 的 Flexbox：
用來處理排版和對齊元素的佈局模型。
讓開發者更方便地創建彈性的容器和彈性的子項目，"無需使用傳統的浮動、定位"等技術。

Flexbox介紹：
優點：

1. 簡單易用：相較於其他佈局模型，語法簡單直觀，容易理解和使用。
2. 彈性布局：自動調整子項目的大小，使其符合容器的大小和其他子項目的需求。
3. 自適應佈局：根據屏幕大小和設備類型自動調整佈局，使網頁具有良好的響應式設計。
4. 方便的對齊和排列控制：提供多種對齊和排列子項目的選項，如水平居中、垂直居中、左對齊、右對齊等，並且可以按據需要進行排序。

CSS的float和Flexbox是用於定位和排版元素的差異：

1. 流式布局 vs 彈性布局：
   • Float：使用浮動屬性可以將元素“浮動”在容器中的左側或右側，並將其他元素流動到其周圍。這種方式適用於網頁的傳統布局。
   • Flexbox：彈性盒子佈局是一種用於在容器中排列排列和對齊元素的靈活模型。它可以使元素在水平和垂直方向上靈活佈局，使其適應不同的屏幕大小和設備。
2. 容器和項目定義：
   • Float：浮動元素是相對於其包含它的容器定位的。要使用浮動元素，必須將其所在的容器的overflow屬性設置為"auto"或"hidden"，以防止內容溢出。
   • Flexbox：布局需要將元素的父級容器設置為display:flex或display:inline-flex，以將其轉換為彈性容器。然後，您可以使用flex屬性來定義容器內元素的佈局和排列方式。
3. 排列和對齊：
   • Float：浮動元素主要用於將元素從正常流動中移除，並將它們左對齊或右對齊。
   • Flexbox：提供了更靈活的佈局和對齊選項。可以讓元素在主軸（水平）和交叉軸（垂直）方向上靈活佈局和對齊，並可以使用justify-content屬性來定義主軸上的對齊方式，使用align-items屬性來定義交叉軸上的對齊方式。

漂浮 很少人在用了