CSS 的基本規則 (Normal flow, BFC, IFC)

在設計 HTML 和 CSS 版面時，常常遇到版面無法如預期呈現的情況

我以前經常求助於 Google 搜尋。

最近觀看 ZeroCho（제로초）的開發者訪談影片時，決定深入了解 CSS 的基礎概念。

- 我希望能理解區塊元素、內聯元素、邊界和對齊方式。

雖然我已經在實務上有所了解，但還是有必要將其整理記錄下來。

■ 如果只是憑藉經驗，邊修改 CSS 邊嘗試各種方法，只求視覺上符合預期，那麼在響應式設計中可能會出現問題，或是在日後的維護工作中變得複雜。

1. 正常流程

- 沒有什麼特別需要考慮的。所有元素都會從上到下、從左到右依序排列。

* 在 durumis（두루미스）上撰寫文章時，貼上 HTML 標籤後會消失，您知道解決方法嗎？;;

- p 標籤會產生兩個區塊，而 span 標籤則會在一行中顯示。

2. BFC（Block Formatting Context）

- 主要用於構建版面。（構建區塊，並在其中構建內聯元素。）

- 區塊級元素堆疊的方式。

- 區塊級元素如下。

<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <table>, <form>

- 無論內容長度如何，都會佔據父元素的整個寬度。（一行）

- 可以在區塊內嵌套區塊或內聯元素。

- 可以設定寬度、高度、邊界和內邊距。

- 在 div 標籤內會產生兩行。

- BFC 的產生時機如下，可以隨時查詢。

• float 屬性不是 none 的情況
• position 為 absolute 或 fixed 的情況
• display 為 inline-block、table-cell、table-caption、flex、inline-flex、grid、inline-grid 的情況
• overflow 不是 visible 的情況等
  
  

3. IFC（Inline Formatting Context）

- 在區塊元素內構建。（非行級）

- 無法直接設定寬度和高度。（僅佔據內容的大小。）

- 只能應用水平內邊距和邊界。

- 內聯元素內只能包含內聯元素。

<span>, <a>, , <img>, <input> 等

那什麼時候會用到呢？

- BFC 用於處理浮動元素的交互作用或邊界重疊。

1. 浮動元素交互作用

- 如果子元素應用自由奔放的樣式，則父元素無法包含。

（float、position absolute、fixed、display inline-block 等...）

- 此時，可以透過為父元素設定 BFC 來構建版面。

（為父標籤應用 display: inline-block、overflow: auto、float: left 等。）

2. 邊界重疊

- CSS 中，相鄰的兩個標籤的上下邊界會重疊。

例如）以下兩個 div 標籤之間的上下間隔為 100px，而非 150px。

- 在上述情況下，可以在兩個標籤之間新增一個新的 BFC 元素。

附註：您知道如何在 durumis（두루미스）中複製貼上 HTML 嗎？;;