CSS float 浮動

float 屬性最初是用來讓文字環繞圖片，後來也被用於網頁佈局。現在 Flexbox 和 Grid 是更好的佈局選擇，但 float 仍有其用途。

float 基本用法

.left {
  float: left;      /* 向左浮動 */
}

.right {
  float: right;     /* 向右浮動 */
}

.none {
  float: none;      /* 不浮動（預設） */
}

文字環繞圖片

這是 float 最原始的用途：

.article img {
  float: left;
  margin: 0 20px 10px 0;
}

<article class="article">
  <img src="photo.jpg" alt="照片">
  <p>這段文字會環繞在圖片的右側...</p>
</article>

clear 清除浮動

clear 用來清除浮動的影響，讓元素不會環繞浮動元素。

.clear-left {
  clear: left;      /* 清除左側浮動 */
}

.clear-right {
  clear: right;     /* 清除右側浮動 */
}

.clear-both {
  clear: both;      /* 清除兩側浮動 */
}

浮動造成的問題

父元素高度塌陷

浮動元素會脫離文件流，導致父元素無法計算高度：

<div class="container">
  <div class="float-left">浮動元素</div>
  <div class="float-left">浮動元素</div>
  <!-- 父元素 .container 的高度會變成 0 -->
</div>

解決方案：Clearfix

使用 clearfix 技巧來清除浮動：

/* 現代 clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

<div class="container clearfix">
  <div class="float-left">浮動元素</div>
  <div class="float-left">浮動元素</div>
</div>

使用 overflow

另一個清除浮動的方法：

.container {
  overflow: hidden;    /* 或 overflow: auto */
}

使用 display: flow-root

最簡潔的現代方法：

.container {
  display: flow-root;
}

實用範例

圖文環繞

.article-image {
  float: left;
  width: 200px;
  margin: 0 20px 15px 0;
}

簡單兩欄佈局

雖然現在推薦用 Flexbox 或 Grid，但 float 也可以做到：

.sidebar {
  float: left;
  width: 250px;
}

.main-content {
  margin-left: 270px;    /* sidebar 寬度 + 間距 */
}

/* 或讓 main-content 也浮動 */
.main-content {
  float: left;
  width: calc(100% - 270px);
}

水平排列元素

.nav-item {
  float: left;
  margin-right: 20px;
}

.nav-item:last-child {
  margin-right: 0;
}

float vs Flexbox/Grid

現代替代方案

Flexbox

/* 用 float 做水平排列 */
.old-way .item {
  float: left;
}

/* 用 Flexbox 做水平排列 */
.new-way {
  display: flex;
}

Grid

/* 用 float 做兩欄佈局 */
.old-layout .sidebar { float: left; width: 200px; }
.old-layout .main { margin-left: 220px; }

/* 用 Grid 做兩欄佈局 */
.new-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
}

何時使用 float

• 適合使用：文字環繞圖片
• 可以使用：需要支援非常舊的瀏覽器
• 不建議使用：一般的佈局需求（請用 Flexbox 或 Grid）