在網頁佈局中，“浮動”是一種常用的技術，它能讓元素脫離常規文檔流，向左或向右“漂浮”，讓其他內容環繞它排列。Bootstrap5提供了一系列簡潔的浮動工具類，無需編寫複雜CSS，就能輕鬆實現左/右浮動和清除浮動的效果，非常適合初學者快速上手。
一、浮動工具類基礎概念¶
浮動工具類通過簡單的class名稱控制元素的浮動方向。Bootstrap5中最基礎的浮動類有兩個：float-start（左浮動）和float-end（右浮動）。它們的作用是讓元素分別向左或向右“漂浮”，就像給元素貼了一個“向左靠”或“向右靠”的標籤。
二、左浮動與右浮動的使用方法¶
1. 左浮動（float-start）¶
給需要向左浮動的元素添加float-start類，元素會向左邊緣靠攏，後面的內容會自動環繞在它右側。
示例代碼：
<div class="bg-light p-3 mb-3">
<div class="float-start bg-primary text-white p-2 me-2">
這是一個左浮動的元素
</div>
<p>這段文字會環繞在左浮動元素的右側，因爲左浮動的元素脫離了文檔流，後面的內容會自然“環繞”它。</p>
</div>
效果說明：
左浮動的元素會靠左顯示，文字會像流水一樣從它的右側繞過，整個佈局不會被它“佔據”垂直空間。
2. 右浮動（float-end）¶
與左浮動類似，float-end讓元素向右邊緣靠攏，後面的內容會環繞在它左側。
示例代碼：
<div class="bg-light p-3">
<div class="float-end bg-success text-white p-2 ms-2">
這是一個右浮動的元素
</div>
<p>這段文字會環繞在右浮動元素的左側，因爲右浮動的元素脫離了文檔流，後面的內容會自然“環繞”它。</p>
</div>
效果說明：
右浮動的元素會靠右顯示，文字會從它的左側繞過，整體佈局更靈活。
三、清除浮動的問題與解決方法¶
當元素使用了浮動後，可能會導致父容器“坍塌”（即父容器高度爲0，無法包裹浮動子元素），這時需要清除浮動。Bootstrap5提供了clearfix工具類來解決這個問題。
1. 爲什麼需要清除浮動？¶
假設父容器沒有設置固定高度，子元素使用了浮動，此時父容器的高度會“塌陷”，導致父容器下面的內容“穿”到父容器上面。clearfix能強制父容器識別到浮動子元素，恢復正常高度。
2. 使用clearfix清除浮動¶
給父容器添加clearfix類，就能讓父容器包裹住所有浮動子元素，避免高度塌陷。
示例代碼：
<!-- 父容器 -->
<div class="bg-light p-3 clearfix">
<!-- 左浮動子元素 -->
<div class="float-start bg-primary text-white p-2 me-2">
我是左浮動
</div>
<!-- 右浮動子元素 -->
<div class="float-end bg-success text-white p-2 ms-2">
我是右浮動
</div>
<!-- 這裏的文字會被包裹在父容器內，不會“塌陷” -->
<p>父容器現在能正常顯示高度了，因爲clearfix幫它“抓住”了浮動的子元素。</p>
</div>
效果說明：
父容器會自動計算高度，包裹住兩個浮動子元素，不會出現“空盒子”現象。
四、響應式浮動（可選進階）¶
Bootstrap5支持響應式浮動類，可以在不同屏幕寬度下控制浮動狀態（如小屏幕用左浮動，大屏幕用右浮動）。
格式爲：float-{斷點}-{方向}，斷點包括sm（≥576px）、md（≥768px）、lg（≥992px）等。
示例：
<!-- 在小屏幕(sm)以上時左浮動，大屏幕(md)以上時右浮動 -->
<div class="float-sm-start float-md-end bg-warning text-dark p-2">
小屏幕左浮，大屏幕右浮
</div>
常用斷點： sm（默認斷點）、md、lg、xl，可根據需求選擇。
五、注意事項¶
- 浮動元素的影響：浮動元素會脫離文檔流，可能導致周圍元素“環繞”，需注意整體佈局是否受影響。
- 避免過度使用：浮動工具類適合快速排版（如圖文混排），複雜佈局建議結合Bootstrap網格系統（Grid）使用。
- 高度問題：父容器需搭配
clearfix，避免浮動子元素導致佈局錯亂。
通過以上內容，你已經掌握了Bootstrap5浮動工具類的基本用法：左浮動（float-start）、右浮動（float-end）、清除浮動（clearfix），以及響應式浮動的簡單應用。這些工具類能幫助你快速實現靈活的佈局效果，而無需從零開始寫CSS浮動樣式。