DAY15 Float、Overflow與flex

2026 iThome 鐵人賽

DAY 15

Modern Web

從結構到互動：現代前端HTML、CSS 、JS 的 30 天修練系列第 15 篇

18th鐵人賽

yelloworange0319

團隊nutc imac

2026-09-29 12:29:00

48 瀏覽

分享至

如何精準控制水平排列

在昨天的文章中，我們透過display屬性認識了元件的排列基因，並學會了用inline-block讓多個盒子在同一行並排，但是，隨著網頁設計越來越複雜，單靠inline-block會遇到許多難以處理的縫隙問題與對齊瑕疵。

為了達成更自由、更完美的左右版面配置，網頁排版技術經歷了漫長的演進，今天我們將一步一步介紹，了解傳統的佈局手段 float（浮動）、 overflow（溢出處理），以及現代前端必學 flex（彈性佈局）。

1.浮動`float`

float屬性的初衷並不是用來做整個網頁的版面配置，而是用來實現報章雜誌常見的「圖文圍繞」效果，然而，在排版技術尚未成熟的時期，工程師普遍借用它來製作網頁的左右並排佈局（如左側導覽欄、右側主要內容）。

觀念特性：一旦對元件設定了float: left;或float: right;，該元件就會像一艘船一樣，從原本的網頁平面「浮起來」，並向左或向右靠邊，直到碰到父容器的邊緣為止。
深究高度塌陷機制：因為浮動元素在幾何上已經離開了正常的標準網頁流（Normal Flow），外層的父容器在計算自身高度時，會完全「抓不到浮動元素的高度」，如果父容器內部全都是浮動元素，父容器的高度就會直接歸零（這就是所謂的高度塌陷），這會引發嚴重的災難，在它下方的其他網頁內容，會誤以為上方沒有任何東西，進而直接往上移動、全部疊在一起，導致畫面徹底崩塌。

2.`overflow: hidden;`

為了修正浮動帶來的高度塌陷，工程師必須進行「清除浮動（Clear Float）」，在眾多解法中，最簡單且最符合直覺的方式，就是在父容器上加上overflow: hidden;屬性。

overflow：它原本是用來決定「當裡面的內容超出外框時，該如何處理」（例如scroll出現捲軸、hidden隱藏超出部分）。
觸發BFC的解法原理：當我們在父容器加上overflow: hidden; 時，在瀏覽器的底層渲染機制中，會強制該父容器轉變為一個獨立的BFC（區塊格式化上下文Block Formatting Context），在BFC的幾何規則下，這個父容器就像是變成了一個獨立的密閉溫室，為了防範內部內容溢出，瀏覽器會強迫父容器必須把內部所有元件（包含已經浮起來的float元素）的實際高度重新計算並包裹進去，透過這個隱藏的瀏覽器邏輯，父容器的高度就會神奇地被撐回來，維持正常的網頁排版秩序。

Float 與 Overflow 範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day15 Float 佈局範例</title>
    <style>
        /* 若不加overflow: hidden，高度會歸零，下方文字會直接衝上來重疊 */
        .parent {
            background-color: #ede6e6;
            padding: 10px;
            overflow: hidden; /* 觸發瀏覽器重新計算高度，清除浮動 */
        }
        .left-menu {
            float: left;
            width: 30%;
            background-color: #34495e;
            color: white;
            height: 100px;
        }
        .right-content {
            float: right;
            width: 65%;
            background-color: #2ecc71;
            color: white;
            height: 150px;
        }
        .footer {
            background-color: #e74c3c;
            color: white;
            padding: 10px;
            text-align: center;
        }
    </style>
</head>
<body>

    <div class="parent">
        <div class="left-menu">我是左側選單 (float: left)</div>
        <div class="right-content">我是右側內容 (float: right)</div>
    </div>

    <div class="footer">
        我是頁尾 (因為父容器有清除浮動，所以我待在下方，沒有跟上面重疊)
    </div>

</body>
</html>

如果沒有overflow: hidden;的話會長下面這樣

3.`display: flex`

雖然float搭配overflow解決了早期並排的問題，但這種「偏方」寫起來非常不直覺，因此，我們有了新的東西：Flexbox（彈性盒佈局）。

只要在父容器宣告display: flex;，它就會瞬間變成一個強大的**「彈性容器（Flex Container）」，而裡面的所有子元件則會變成「彈性項目（Flex Items）」**。

軸線模型觀念：Flexbox放棄了傳統的上下左右死板排列，改用 「主軸（Main Axis）」 與 「交叉軸（Cross Axis）」 的幾何坐標軸觀念來管理版面，子元件完全不需要寫任何float，預設就會沿著主軸方向優雅地橫向並排，且永遠不會發生高度塌陷的問題。
強大的對齊控制屬性：
- justify-content：專門用來控制子元件在 主軸（水平） 的空間分配，例如一秒完成居中、兩端對齊、或是平均分散留白。
- align-items：專門用來控制子元件在 交叉軸（垂直） 的對齊方式，不論內部子盒子的高度多麼不一致，都能輕鬆實現完美居中，徹底根除了傳統CSS在垂直置中上的開發痛點。

範例

<!DOCTYPE html>
<html lang="zh-Hant">
<head>
    <meta charset="UTF-8">
    <title>Day15 Flexbox 佈局範例</title>
    <style>
        .flex-container {
            display: flex;
            justify-content: space-between; /* 水平分配：兩端對齊，中間留白 */
            align-items: center;            /* 垂直分配：子元件一律完美垂直居中 */
            background-color: #ede6e6;
            padding: 20px;
            height: 200px;
        }
        .item {
            width: 100px;
            height: 80px;
            background-color: #34495e;
            color: white;
            text-align: center;
        }
        .item-tall {
            height: 140px; /* 給予不同的高度，觀察垂直居中效果 */
            background-color: #2ecc71;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="item">項目 A</div>
        <div class="item item-tall">項目 B (較高)</div>
        <div class="item">項目 C</div>
    </div>

</body>
</html>