CSS 最佳實踐 + 套路（八） -- BFC

概述

BFC（Block Formatting Context）塊級格式化上下文。我並不知道 BFC 是什麼，但是隻要寫出樣式，我就知道這是不是 BFC。BFC 沒有明確的定義，只有特徵或功能。

形成 BFC 條件

1. 浮動（float: left | right）

2. 絕對定位元素（position: absolute）

3. 非塊盒的塊容器（display: inline-block | table-cells | table-captions）

4. overflow 不爲 visible 的塊盒（visible: auto | hidden | scroll）

5. display: flow-root ==> 專門用於使得當前元素觸發 BFC

功能

1. 將內部浮動元素包裹起來
   使用 BFC 將其內部浮動元素包裹起來
   

代碼地址

1. 兩個相鄰的 BFC 劃清界限
   float + div 左右自適應佈局
   

代碼地址

BFC 與 文檔流

BFC 是本身特性，它會影響元素的寬高
文檔流指內聯元素從左到右排列，塊級元素從上到下排列。它會影響元素的排列順序
二者沒有關係
BFC 裏面有文檔流，BFC 本身也可以是文檔流

最佳實踐 & 套路

不要去使用 BFC

1. 清除浮動使用 clearfix

   1 2 3 4 5

   clearfix::after{ content: ''; display: block; clear: both; }

2. 劃清界限使用 display: flex
   使用 display: flex + flex: 1
   

相關知識點

BFC 內部相鄰塊級元素豎直 margin 合併

• 
  

© CZBBhkrx