浮動
? ? ?HTML浮動（Float）是一種CSS布局技術，通過float: left或float: right使元素脫離常規文檔流并向左/右對齊，常用于圖文混排或橫向排列內容。浮動元素會緊貼父容器或相鄰浮動元素的邊緣，但脫離文檔流后可能導致父容器高度塌陷，需通過偽元素添加clear: both來修復。傳統布局中，浮動被用于多欄設計或導航菜單，但因需手動計算寬度且適配性差，逐漸被Flexbox和Grid布局替代。使用浮動時需注意元素間的間距控制，避免內容重疊；現代開發中建議優先選擇更直觀的彈性或網格布局，僅保留浮動用于簡單的文本環繞場景，如圖片與文字的自然排版。
浮動的核心特性
? ? ?通過元素脫離文檔流，實現水平對齊，常見于圖文混排或多元素橫向排列。浮動元素緊貼父容器或相鄰元素邊緣，但會導致父容器高度塌陷，需用clear: both清除浮動。
脫離文檔流
HTML脫離文檔流指元素（如float、fixed定位）不再占據常規布局空間，父容器可能高度塌陷，后續元素會填補其位置，需手動調整布局或清除浮動避免錯位，常見于懸浮層、彈窗等場景。
<div class="float-box"></div>
<p>文字內容將圍繞浮動元素排列...</p><style>
.float-box {float: left;width: 150px;height: 150px;background: skyblue;margin-right: 20px;
}
</style>
此代碼效果：藍色方塊浮動后，段落文字自動環繞
元素自動轉為塊級元素
HTML元素通過設置display:block或特定屬性（如float、position:absolute/fixed）轉為塊級，獨占一行且可設置寬高，如默認塊級元素<div>或行內元素<span>被強制轉換后的表現。
span {float: left; /* 行內元素變為塊級 */width: 200px; /* 原本無效的屬性生效 */
}經典布局
HTML經典布局依賴表格、浮動或定位實現，但代碼響應式適配差，需手動計算尺寸，現逐漸被Flex/Grid布局取代，適用于傳統網頁適配場景。
兩欄布局
兩欄布局是頁面被分成左右兩個主要區域。一個常見的例子是左側為導航欄，右側為主要內容區。
?如圖所示，這就是一個經典的兩欄布局
<div class="box"><div class="left">左欄</div><div class="right">右欄</div>
</div><style>
.left {float: left;width: 200px;background: #ffe4b5;
}
.right {float: right;width: 150px;background: #98fb98;
}
</style>此代碼就是一個正常的兩欄布局框架
三欄布局
三欄布局增加了中間的內容區，兩邊可以作為側邊欄使用。這種布局適合內容較多且需要分類展示的網頁。
??如圖所示，這就是一個經典的三欄布局，HTML元素按照它們在HTML文檔中的順序從上到下、從左到右依次排列的方式。每個塊級元素默認占據一整行，而內聯元素則在同一行內連續排列直到沒有足夠的空間為止。通過改變元素的display、position等屬性，我們可以調整元素的位置和排列方式，但這些操作都是基于標準文檔流進行的。
<div class="box"><div class="left">左欄</div><div class="right">右欄</div><div class="main">主內容區</div>
</div><style>
.left {float: left;width: 200px;background: #ffe4b5;
}
.right {float: right;width: 150px;background: #98fb98;
}
.main {margin: 0 160px 0 210px; /* 間距設置 */
}
</style>此代碼就是一個正常的三欄布局框架
display 屬性
display屬性定義元素的顯示模式，控制元素排列方式及子元素布局規則，例如display: none可隱藏元素。
display屬性用于定義元素生成的框的類型：
block元素前后換行顯示，寬度默認占滿父容器。
inline元素不換行顯示，只占用其內容所需的空間。
inline-block元素不會獨占一行，但是它可以設置高度和寬度。
none元素不生成任何框，即該元素不會顯示。
float 屬性
float屬性它主要用于圖像環繞文本效果或創建多列布局如：使元素向左/右浮動，脫離文檔流，實現圖文混排或橫向布局；需用clear清除浮動避免父容器高度塌陷。
left元素向左浮動。
right元素向右浮動。
none默認值，元素不會浮動
.image-left {float: left;
}
.image-right {float: right;
}clear 屬性
HTML的clear屬性用于清除元素兩側的浮動影響，防止被浮動元素環繞，通常加在需恢復文檔流的元素上，如clear: both解決父容器高度塌陷，適配傳統浮動布局場景。
clear屬性用于阻止父元素內的子元素環繞浮動元素。
left不允許元素左邊有浮動元素。
right不允許元素右邊有浮動元素。
both不允許元素左右兩邊都有浮動元素。
none默認值，允許元素四周有浮動元素。
清除浮動
HTML清除浮動解決父容器高度塌陷，常用方法：添加空元素clear:both，父級overflow:hidden現代布局推薦Flex/Grid替代浮動。
清除
在浮動元素后面添加一個空的<div>標簽，并設置clear:both 。
<div style="clear: both"></div>?BFC觸發
為父容器設置overflow: hidden
.box {border: 3px solid #48dbfb;margin-bottom: 30px;padding: 10px;overflow: hidden; /* 關鍵代碼：觸發BFC */
}浮動與現代布局對比
| 特性 | Float | Flexbox | Grid |
|---|---|---|---|
| 布局維度 | 一維 | 一維 | 二維 |
| 響應式支持 | 需要媒體查詢 | 內置彈性 | 內置響應 |
| 內容流控制 | 破壞文檔流 | 保持文檔流 | 保持文檔流 |
| 瀏覽器兼容性 | 全支持 | IE10+ | IE11+ |
總結?
? ? ?HTML浮動（Float）是CSS早期核心布局技術，通過float: left/right使元素脫離文檔流并向指定方向對齊，常用于實現圖文混排（如圖片文字環繞）或多欄布局。浮動元素會緊貼父容器或相鄰浮動元素邊緣，但脫離文檔流的特性會導致父容器高度塌陷（不包含浮動元素高度），需通過以下方式解決： ?
- 清除浮動：在父容器末尾添加clear: both的空元素； ?
- BFC觸發：為父容器設置overflow: hidden； ?
浮動布局需手動計算寬度且響應式適配困難，現代開發中更推薦Flexbox或Grid布局替代，僅保留簡單場景（如文本環繞圖片）使用。
