BFC

358 阅读1分钟

BFC

一:在了解 BFC 之前首先需要了解 css 布局,了解标准流、非标准流,以及相互影响。

  标准流:

  1. 块级元素独立占据一行,自上向下排列;
  2. 行内元素从左至右排列,知道填满一行才进行换行;

  非标准流:

 浮动,绝对定位会使元素脱离文档流;

二:BFC 可以理解为一个区域,在这个区域内的元素无论如何布局排版,都不影响区域外的元素。

三:以下方法都会触发BFC

  • body 根元素

  • 浮动元素:floatnone 以外的值

  • 绝对定位元素:position (absolute、fixed)

  • displayinline-blocktable-cellsflex

  • overflow 除了 visible 以外的值 (hidden、auto、scroll)