先看這個例子
本例 body 沒有 margin，section 沒有邊框或內距，段落上距則是 24px。flow-root 建立區塊格式化脈絡，把這個上距保留在 section 內。
| 情況 | 輸入或查看方法 | 結果與意思 |
|---|---|---|
| 父層頂部 | 量度 .box 頂部 | 0px |
| 子元素頂部 | 量度 .box p 頂部 | 24px |
| 上距位置 | 查看有底色的 section | 上距保留在有底色範圍內 |
瀏覽器怎樣處理
一般區塊配置中，相鄰的垂直 margin 可能合併。新的區塊格式化脈絡會改變這個邊界。flow-root 沒有刪段落 margin，而是阻止本例父層與首段上距合併。水平方向 margin 不沿用這條合併規則。
一般區塊會令這個上距合併
反例移除 flow-root，無邊框、無內距的容器及段落上距均不變。
<style>body{margin:8px}</style>
<style>body{margin:0}.box{background:#e3efe8}.box p{margin:24px 0 0}</style><section class="box"><p>工作坊的第一段筆記</p></section>這份固定反例的父層和子元素頂部同在 y=24；上距在父層底色之外。
試着修正
flow-root 是否把子元素 margin 變成零？
查看參考答案
不是。上距計算值仍是 24px，只改變它能否跨父層邊界合併。
- 另開文件，父層和子元素頂部都要量。
- 比較時保留本例無邊框、無內距的條件。