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

`float` 與 `position` 怎麼選

兩者都能「把東西放到某處」，但機制完全不同。選錯會出現重疊、高度塌陷，或滾動時跑掉。

	`float`	`position`
主要目的	讓後續文字環繞	相對某參考點放置
文件流	離開正常流，但仍影響行框	`relative`/`sticky` 仍佔位；`absolute`/`fixed` 不佔位
典型用途	文繞圖	角標、彈層、固定導覽、黏表頭
現代替代	Flex / Grid 做欄位	大多數定位需求仍用 position

何時用 float

只在「這張圖（或 pull quote）要嵌在段落裡，文字從旁邊流過去」時使用。記得父層 display: flow-root。

blockquote.pull {
  float: inline-end;
  width: 12rem;
  margin-inline-start: 1rem;
  font-size: 0.95rem;
}

多欄、對齊、等間距，都不要再用 float。

微調位置，或當絕對定位子元素的參考框：

.card { position: relative; }

放在容器角落，不擠開其他內容：

.card .sale {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
}

相對視口，做返回頂部、客服按鈕、全螢幕遮罩。

滾動時在容器內黏住。表頭、側邊目錄很常用。祖先的 overflow 會限制它。

float 管「流體排版裡的環繞」；position 管「釘在某個參考點」。欄位系統請往 Flex 與 Grid 走。