本系列可作為前端學習系列的筆記，代碼的運行環境是在HBuilder中，小編會將代碼復制下來，大家復制下來就可以練習了，方便大家學習。
HTML系列文章?已經收錄在前端專欄，有需要的寶寶們可以點擊前端專欄查看！
點贊關注不迷路！您的點贊、關注和收藏是對小編最大的支持和鼓勵！
系列文章目錄
CSS- 1.1 css選擇器
CSS- 2.1 實戰之圖文混排、表格、表單、學校官網一級導航欄
CSS- 3.1 盒子模型-塊級元素、行內元素、行內塊級元素和display屬性
CSS- 4.1 浮動（Float）
CSS- 4.2 相對定位（position: relative）
CSS- 4.3 絕對定位（position: absolute）&學校官網導航欄實例
CSS- 4.4 固定定位（fixed）& 咖啡售賣官網實例?
目錄
系列文章目錄
前言
一、理論部分
1.基本概念
2.浮動屬性值
3.浮動元素的特點
4.常見用途
5.清除浮動
5.浮動布局示例
6.現代布局替代方案
7.注意事項
二、代碼實例
總結
前言
小編作為新晉碼農一枚，會定期整理一些寫的比較好的代碼，作為自己的學習筆記，會試著做一下批注和補充，如轉載或者參考他人文獻會標明出處，非商用，如有侵權會刪改！歡迎大家斧正和討論！
一、理論部分
浮動（Float）是CSS中的一個重要布局屬性，最初設計用于讓文本環繞圖像，但現在廣泛用于網頁布局。
1.基本概念
浮動屬性使元素脫離正常的文檔流，向左或向右移動，直到碰到包含框或另一個浮動元素為止。
2.浮動屬性值
float: left;?- 元素向左浮動float: right;?- 元素向右浮動float: none;?- 默認值，元素不浮動float: inherit;?- 繼承父元素的浮動屬性
3.浮動元素的特點
- 脫離文檔流：浮動元素不再占據文檔流中的空間
- 文字環繞：非浮動的塊級元素會環繞浮動元素
- 高度塌陷：父元素可能無法自動包含浮動子元素的高度
4.常見用途
- 多欄布局：創建等寬或不等寬的多欄布局
- 文本環繞圖片：經典的圖文混排效果
- 導航菜單：創建水平排列的導航項
5.清除浮動
由于浮動元素脫離文檔流，可能導致父元素高度塌陷，常用清除浮動的方法：
1. 使用clear屬性
css
.clearfix {clear: both;
}2. 空div方法
html
<div style="clear: both;"></div>3. 偽元素清除法（推薦）
css
.clearfix::after {content: "";display: table;clear: both;
}4. 觸發BFC（塊級格式化上下文）
css
.parent {overflow: hidden; /* 或 auto */
}5.浮動布局示例
html
<div class="container"><div class="box" style="float: left; width: 30%;">左側內容</div><div class="box" style="float: left; width: 70%;">右側內容</div><div style="clear: both;"></div> <!-- 清除浮動 -->
</div>6.現代布局替代方案
雖然浮動仍然有用，但現代CSS布局技術如：
- Flexbox
- CSS Grid
- 定位(position)
通常能提供更強大和直觀的布局解決方案。
7.注意事項
- 浮動元素需要明確設置寬度（除非是圖像等有內在寬度的元素）
- 浮動會影響后續元素的布局
- 在響應式設計中，浮動布局可能不如Flexbox或Grid靈活
浮動是CSS中一個強大但需要謹慎使用的工具，理解其工作原理對于創建穩定的布局至關重要。
二、代碼實例
代碼實例如下：
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>浮動float</title><style type="text/css">.father {width: 400px;height: 900px;border: 1px solid black;}.div1 {width: 100px;height: 100px;background-color: red;float: left;}.div2 {width: 200px;height: 200px;background-color: blue;float: left;}.div3 {width: 100px;height: 600px;background-color: green;float: left;}.c1 {clear: both;/* 清除浮動 */}ul li {float: left;width: 120px;}</style></head><body><div class="father"><div class="div1"></div><div class="div2 c1"></div><div class="div3"></div></div><ul><li>列表1</li><li>列表2</li><li>列表3</li><li>列表4</li><li>列表5</li></ul></body>
</html>代碼運行：
總結
以上就是今天要講的內容，本文簡單記錄了CSS-浮動（Float），僅作為一份簡單的筆記使用，大家根據注釋理解
