建立 2025-02-25 更新 2026-09-11

浮動佈局（Float）

float 讓元素靠左或靠右，後續的行內內容會環繞它。這是早期多欄排版的主力；現在版面請改用 Flex / Grid，float 留給「圖片 + 正文環繞」這類印刷式排版。

`float` 屬性

.article img.lead {
  float: left;
  width: min(40%, 220px);
  margin: 0 1rem 0.5rem 0;
}

浮動元素會離開正常流，父層如果只剩浮動子元素，高度會塌成 0。

HTMLCSS

<article class="prose">
  <img src="photo.jpg" alt="範例照片" class="lead">
  <p>這段文字會沿著圖片的外側排列……</p>
</article>

.prose .lead {
  float: left;
  margin-inline-end: 1rem;
  margin-block-end: 0.5rem;
}

.footer { clear: both; }

值	意義
`left` / `right`	不允許該側還有浮動
`both`	兩側都不允許

讓父層包住浮動子元素的常見做法：

.gallery {
  display: flow-root; /* 建立 BFC，現代首選 */
}

/* 舊專案仍看得到的 clearfix */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

overflow: auto 也能包住浮動，但可能多出捲軸，較不建議當佈局技巧。

.layout::after {
  content: "";
  display: block;
  clear: both;
}
.sidebar { float: left; width: 30%; }
.content { float: right; width: 70%; }

這種寫法對不齊高度、難做 RWD。同等需求請用：

.layout {
  display: grid;
  grid-template-columns: 18rem 1fr;
  gap: 1.5rem;
}

與 position 的分工見浮動與定位比較。