HTML中的“浮動”（Float）是一個CSS布局技術，它原本設計用于文本環繞圖像或實現簡單的布局效果，比如并排排列元素。然而，隨著Web開發的演進，浮動也被廣泛用于更復雜的頁面布局設計中，盡管現代CSS提供了更先進的布局方法（如Flexbox和Grid）。
浮動的基本作用
-
文本環繞：這是浮動最原始和直觀的應用。當圖像（或其他塊級元素）被設置為浮動時，周圍的文本會環繞它流動，而不是按照正常的文檔流（從上到下，從左到右）繼續排列。
-
并排布局：通過給多個元素設置浮動，可以讓它們并排排列，而不是默認的堆疊方式。這在創建導航欄、圖片畫廊或任何需要元素水平排列的布局時非常有用。
如何使用浮動
總結
雖然浮動是Web開發中重要的布局技術之一，但它也帶來了一些復雜性和限制。隨著Flexbox和Grid等現代CSS布局技術的出現，浮動在復雜布局中的應用逐漸減少，但在某些簡單場景或需要向后兼容舊瀏覽器的項目中，浮動仍然是一個有用的工具。
后續會持續更新分享相關內容，記得關注哦！
-
CSS屬性：通過
float屬性來實現元素的浮動。該屬性可以接受幾個值，包括left、right、none（默認值，表示不浮動）和inherit（繼承父元素的float值）。 -
例子：
-
<!DOCTYPE html> <html> <head> <style> .float-left { float: left; width: 50%; } .float-right { float: right; width: 50%; } </style> </head> <body> <div class="float-left">左邊的內容</div> <div class="float-right">右邊的內容</div> </body> </html> -
在這個例子中，兩個
<div>元素通過設置float: left;和float: right;實現了并排布局。 -
浮動的影響
-
脫離文檔流：浮動元素會脫離正常的文檔流，這意味著它們不再占據原來的空間，其他非浮動元素會忽略它們的存在，并填補它們留下的空白。
-
對后續元素的影響：浮動元素之后的非浮動元素會嘗試填補浮動元素留下的空間，但浮動元素本身不會覆蓋后續元素的內容或邊框。
-
清除浮動：為了避免浮動對后續布局造成不可預測的影響，通常需要使用清除浮動的方法，如使用
clear: both;屬性、偽元素清除法或建立新的塊級格式化上下文（如使用overflow: auto;或display: flex;）。
