元素排版方式

进行网页排版时，每种元素通常都会遵照默认的排版方向 ( Normal Flow ) 进行排列，不同显示属性的元素具有不同的默认排版方向，这篇教学会介绍不同元素的排版格式，以及 IFC 和 BFC 在排版格式上的差异。

快速导览：

• 默认排版方向 ( Normal Flow )
• 改变默认排版方向的因素
• 认识排版格式 ( Formatting Context )
• 行内容器排版格式 ( IFC )
• 区块容器排版格式 ( BFC )

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

元素默认的排版方向

网页元素默认排版方向称为 Normal Flow ( 正常流向 )，在没有进行任何设定的状态下，会按照下列规则排列：

• 采用“相对位置”排列，当元素周遭元素或父元素位置或尺寸变化时，也会影响元素的位置。
• 行内元素采用“左到右、上到下”排列 ( 右到左语系为右到左 )。
• 区块元素采用“上到下”排列。

改变默认排版方向的因素

虽然元素会按照排版的正常流向进行排版，但只要透过下列方式，就能改变排版的方向：

• 修改 display 显示类型：直接改变元素默认排版行为 ( 例如 block 变成 inline，参考 容器显示类型 )。
• 使用 float 浮动：让元素离开原本平面 ( 类似从原本的平面浮起变成浮动状态 )，根据浮动规则排列。
• 修改 position 定位：指定元素采用相对位置或绝对位置定位。
• 使用其他排版方式：例如 flex、grid、table、column 等均有各自的排版规则。

认识排版格式 ( Formatting Context )

Formatting Context 表示“元素在和其他元素互动时，需要遵守的排版格式”，这个格式定义了元素、元素的外部元素、元素的子元素之间的位置和排列关系，Formatting Context 根据元素的显示类型，主要分成两大类：

• 行内容器排版格式 Inline Formatting Context ( IFC )
• 区块容器排版格式 Block Formatting Context ( BFC )

如果元素显示属性是 table、flex、grid，则除了会套用 BFC，也会搭配对应的排版格式一同使用，这些格式大致可分成下面三类 ( 会用额外篇幅介绍这些容器与排版方式 )：

• 表格容器排版格式 Table Formatting Context ( TFC )，参考“认识表格、表格默认样式”
• 弹性容器排版格式 Flex Formatting Context ( FFC )，参考“认识弹性盒子 Flexbox”
• 网格容器排版格式 Grid Formatting Context ( GFC )，参考“使用 Grid 网格容器与格线”

行内容器排版格式 ( IFC )

只要是行内容器 ( display: inline 元素 )，都会建立具有“行内容器排版格式”的 IFC 环境 ( Inline Formatting Context )，IFC 环境里的元素会按照下列规则进行排版：

• 从所在容器的顶部开始“水平排列”。
• IFC 环境里的每一行都会产生一个“行框”。
• 如果内容因自动换行而出现“多行”状况时，会自动分成多个垂直排列的行框。
• 如果内容无法自动换行，则内容会溢出元素容器。
• 宽度主要由“内容、容器边界”计算，高度主要由“内容高度、字号、行高”计算。
• 垂直对齐时，如果高度小于父元素高度，则使用“vertical-align”对齐，默认值为 baseline 基线。
• 水平对齐时，如果宽度小于父元素宽度，则使用“text-align”对齐，默认值为 left。

IFC 环境有个特色，如果内容里出现了其他行内元素，则被截断的文字会自动生成新的“匿名”元素 ( 没有元素标签包覆的内容 )，以下方的例子而言，p 元素里的内容，默认会产生“五个”行内容器，分别是 strong、em 和三个匿名元素 ( STEAM 教育學習網透過一系列、的教學與範例，讓所有人都能、STEAM 的學習領域。 )，如果显示画面发生“换行”情况，则会产生额外的行框。

透过 CSS 的方式设定 p 里所有元素的垂直对齐方式，就能看出 IFC 环境里的行内元素，都按照垂直对齐规则进行对齐，发生换行后，不同行的元素会在该行里遵循规则排列。

线上展示：https://codepen.io/oxxo/pen/rNEJbpp

<!-- HTML 程式碼-->
<p>STEAM 教育學習網透過一系列<stong>免費且高品質<strong>的教學與範例，讓所有人都能<em>輕鬆跨入</em> STEAM 的學習領域。</p>

<!-- CSS 程式碼 -->
<style>
  p *{
    vertical-align: top;
  }
  strong {
    font-size: 50px;
  }
  em {
    font-size:10px;
  }
</style>

区块容器排版格式 ( BFC )

相较于 IFC 环境，BFC ( Block Formatting Context ) 的定义就较为广泛，根据 W3C 的描述，只要是符合下列规则，都会建立一个具有“区块容器排版格式”的 BFC 环境：

• html 元素以及所有 display: block 的元素。
• 使用 float 或 position 属性变成浮动、绝对定位的元素。
• display: inline-block 的元素。
• 表格、储存格或任何 display: table-* 属性相关的元素。
• overflow 属性不是 visible 的区块容器元素。

在 BFC 环境里的子元素，会具有下列的特色：

• 只要一个元素建立了 BFC，子元素的排版行为就会遵守特定规则，并与外部“隔离”。
• 如果是区块容器元素，会从所在父元素的顶部开始“垂直排列”。
• 位于同一个 BFC 环境里的区块容器之间，由“margin”定义垂直间距。
• 位于同一个 BFC 环境里的区块容器“margin 会重叠”，如果在不同的 BFC 环境里，就不会重叠，重叠会采用“最大的 margin 值”。
• 设定浮动、绝对定位、表格、flex、grid 元素会建立新的 BFC 环境但仍保有自己的规则，这些元素的子元素，默认会贴齐父元素左侧。

下方范例展示 BFC 的子元素被隔离在“自己的区域”里 ( div 2 里的 h2 和 h3 )，不会影响到父元素之外的元素排版布局。

线上展示：https://codepen.io/oxxo/pen/EajjOjp

<!-- HTML 程式碼 -->
<div><h2>div 1</h2><h3>OXXO</h3></div>
<div class="a"><h2>div 2</h2><h3>我不會影響到別人</h3></div>
<div><h2>div 3</h2><h3>OXXO</h3></div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 2px solid #000;
    width: 200px;
    height: 100px;
    margin: 10px 50px;
  }
  h2, h3 {margin: 0;}
  .a h2, .a h3 {
    border: 2px solid red;
    width: 300px;
    height:30px;
    margin: 10px;
    padding: 10px;
    background: #f006;
  }
</style>

下方的例子展示了位于一个 div 里的三个 div，这三个 div 虽然都有设定 margin，但因为必须符合 BFC 环境的规则，中间的 margin 就会重叠在一起。

线上展示：https://codepen.io/oxxo/pen/mdZXgpN

<!-- HTML 程式碼 -->
<div>
  <div class="a">apple</div>
  <div class="a">banana</div>
  <div class="a">oxxo</div>
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    margin: 0;
    border: 1px solid #000;
  }
  .a {
    margin: 30px;
  }
</style>

小结

元素排版方式主要是网页排版的观念，除了边界重叠的情形较为特殊，其他大部分的状况都是常见且容易理解的，对于实际操作并不会产生什么的影响，不过透过这篇教学，应该能更深入认识不同元素的排版规则。

意见反馈