一、浮動float屬性
| ?屬性值? | ?描述? | ?適用場景? |
|---|---|---|
left | 元素向左浮動，騰出右側空間供其他元素使用，其他內容會圍繞在其右側?。 | 橫向排列元素（如導航菜單）、圖文混排布局?。 |
right | 元素向右浮動，騰出左側空間供其他元素使用，其他內容會圍繞在其左側?。 | 右側懸浮按鈕、圖片右對齊的文本環繞效果?。 |
none | 默認值，元素不浮動，按正常文檔流排列?。 | 取消已有浮動效果，恢復默認布局?。 |
inherit | 繼承父元素的float屬性值?。 | 需要子元素與父元素保持相同浮動行為時?。 |
inline-start | 元素向行內開始方向浮動（如從左到右的文本中為左浮動，從右到左的文本中為右浮動）。 | 多語言排版適配（如阿拉伯語等從右向左書寫的語言）?。 |
inline-end | 元素向行內結束方向浮動（如從左到右的文本中為右浮動，從右到左的文本中為左浮動）?。 | 與inline-start配合實現動態方向適配?。 |
?注意事項?：
inline-start和inline-end為CSS3新增值，需注意瀏覽器兼容性?。- 浮動元素需明確設置寬度以避免布局錯亂（默認寬度由內容撐開）?。
- 父容器需通過清除浮動（如
.clearfix偽元素）解決高度塌陷問題??
?案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>CSS 浮動特性</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;}.container {max-width: 800px;margin: 0 auto;background-color: #fff;padding: 20px;border-radius: 10px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);}.box {width: 200px;height: 100px;margin: 10px;/* 左浮動 *//* float: left; *//* 右浮動 *//*float: right;*/background-color: #007BFF;color: white;text-align: center;line-height: 100px;border-radius: 5px;}.clearfix::after {content: "";display: block;/* 清除浮動 *//* clear: both; */}.footer {background-color: #e3f2fd;padding: 10px;text-align: center;margin-top: 20px;border-radius: 5px;}</style>
</head>
<body><div class="container"><h1>CSS 浮動特性</h1><div class="clearfix"><div class="box">Box 1</div><div class="box">Box 2</div><div class="box">Box 3</div><div class="box">Box 4</div></div><div class="footer">這是一個底部區域</div></div>
</body>
</html>（1）沒有浮動?
（2）左浮動：float:left;
（3）右浮動：float:right;
?二、清除浮動clear屬性
| ?屬性值? | ?描述? | ?典型應用場景? |
|---|---|---|
left | 元素下方不允許存在左浮動元素，強制換行到左浮動元素下方?。 | 清除左側浮動布局 |
right | 元素下方不允許存在右浮動元素，強制換行到右浮動元素下方?。 | 清除右側浮動布局 |
both | 元素下方不允許存在任何浮動元素，強制換行到所有浮動元素下方?。 | 通用清除浮動（如父容器包裹浮動子元素時避免高度塌陷）? |
none | 默認值，允許元素下方存在浮動元素，不強制換行?。 | 取消清除浮動行為，恢復默認布局?。 |
inherit | 繼承父元素的?clear?屬性值?。 | 子元素需與父元素保持相同清除行為時使用? |
（4）清除浮動 clear:both;
注意：?父容器需通過清除浮動（如
.clearfix偽元素）解決高度塌陷問題??
三、典型應用場景
1?、橫向導航菜單
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {font-family: Arial, sans-serif;background-color: #f4f4f4;margin: 0;padding: 20px;}.nav {background-color: #68a4df;color: white;padding: 10px;text-align: center;height:30px; /* 設置導航欄高度 */}.item {/* display: inline-block; */width: 80px; /* 設置寬度 */float: left; /* 使用浮動布局 */margin: 0 15px;cursor: pointer;line-height: 30px; /* 設置行高與導航欄高度一致 */}</style>
</head>
<body><div class="nav"><div class="item">首頁</div><div class="item">產品</div><div class="item">關于</div></div></body>
</html>注意：display: inline-block; 類似于浮動效果
?左浮動效果
?2、?兩欄/三欄布局
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>兩欄布局</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;}.container {width: 80%;margin: 20px auto;background-color: #f4f4f4;overflow: hidden; /* 清除浮動 */}.left {float: left;width: 70%; /* 左側寬度 */background-color: #007BFF;color: white;padding: 20px;box-sizing: border-box;}.right {float: left;width: 30%; /* 右側寬度 */background-color: #FFC107;color: white;padding: 20px;box-sizing: border-box;}</style>
</head>
<body><div class="container"><div class="left">左側內容</div><div class="right">右側內容</div></div>
</body>
</html>? ?沒有浮動效果
? ? 左浮動效果
3、?圖文環繞效果
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圖文環繞效果</title><style>body {font-family: Arial, sans-serif;line-height: 1.6;margin: 20px;}.image {/* 圖片左浮動 */float: left; margin-right: 15px; /* 圖片右側間距 */margin-bottom: 10px; /* 圖片底部間距 */width: 300px; /* 圖片寬度 */height: auto; /* 保持圖片比例 */border-radius: 10px; /* 圓角效果 */box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 圖片陰影 */}.content {text-align: justify; /* 文本兩端對齊 */}</style>
</head>
<body><div class="content"><img src="https://preview.qiantucdn.com/58pic/71/78/23/36T58PICmR9Uz7fyhC5m4_origin_PIC2018.jpg!w1024_new_small_1" alt="示例圖片" class="image"><p>這是一個圖文環繞效果的示例。圖片使用浮動屬性設置為左浮動，文本內容會自動環繞在圖片的右側。這種布局常用于新聞文章、博客內容或產品描述頁面，能夠很好地展示圖片和文字的結合。</p><p>通過設置圖片的 `float: left;`，可以讓圖片浮動到文本的左側，同時通過 `margin-right` 和 `margin-bottom` 設置圖片與文本之間的間距。這樣可以避免圖片和文字緊貼在一起，提升頁面的美觀性和可讀性。</p><p>你還可以根據需要調整圖片的寬度、高度以及圓角效果，甚至為圖片添加陰影，使其更加突出。這種圖文環繞布局在響應式設計中也非常實用，可以通過媒體查詢調整圖片和文字的排列方式。</p></div>
</body>
</html>? ?沒有浮動效果
左浮動效果?
四、注意事項
- ?明確設置寬度? ：未設置寬度的浮動元素寬度由內容撐開，可能導致布局錯亂?。
- ?優先現代布局方案?：復雜布局建議使用
Flexbox（彈性盒子）或Grid（網格布局），減少浮動帶來的維護成本?。- ?高度塌陷問題? ：父容器需清除浮動，否則高度為0（如未閉合的浮動元素會導致頁面結構崩潰）?。
![[react]Next.js之自適應布局和高清屏幕適配解決方案](http://pic.xiahunao.cn/[react]Next.js之自適應布局和高清屏幕適配解決方案)
