flex遇到float

在早期 CSS 排版中，float 是最常見的水平排列方式。但當你在 flex container 內的子元素使用 float 時，會發現完全沒有作用——這是 CSS 規範的設計，並非 bug。

為什麼 float 在 flex 內失效？

根據 CSS 規範，flex 子元素（flex items）會自動忽略 float 屬性。當一個元素的父層設定了 display: flex，子元素無論設定 float: left 或 float: right 都不會有任何效果，因為 flex 格式化上下文（flex formatting context）會覆蓋掉浮動行為。

1
2
3
4
5
6
7
8

.container {
  display: flex;
}

.item {
  float: left; /* 完全無效，會被忽略 */
  width: 100px;
}

使用 Flex 取代 Float 排版

Flexbox 本身就提供了比 float 更強大且直觀的水平排列能力，不需要再依賴 float。

水平排列（取代 float left）

1
2
3
4
5

.container {
  display: flex;
  flex-direction: row; /* 預設值，子元素水平排列 */
  gap: 16px;
}

靠右對齊（取代 float right）

過去用 float: right 將元素推到右邊，在 flex 中有更優雅的做法：

1
2
3
4
5
6
7
8
9

.container {
  display: flex;
  justify-content: flex-end; /* 全部靠右 */
}

/* 或只讓某個元素靠右 */
.item-right {
  margin-left: auto;
}

兩端對齊（左右各一個）

1
2
3
4

.container {
  display: flex;
  justify-content: space-between;
}

常見混用情況

有時候舊專案中父層可能同時設定了 flex 和裡面子元素殘留的 float，造成排版異常。解決方式是移除子元素的 float 設定，改用 flex 的屬性控制排版。

Flexbox 是現代 CSS 的主流排版方式，不僅功能更完整，也免除了 float 帶來的 clearfix 等問題，建議新專案直接採用 flex 排版。

參考資料

• JSFiddle 示範