关于对BFC的理解

22 阅读2分钟

BFC定义

  • W3C上对BFC的定义

原文:Floats, absolutely positioned elements, block containers (such as inline-blocks, tablecells, and table-captions) that are not block boxes, and block boxes with ‘overflow’ other than ‘visible’ (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

译文:浮动、绝对定位元素、不是块盒子的块容器(如 inline-blocks 、 table-cells 和table-captions ),以及 overflow 属性的值除 visible 以外的块盒,将为其内容建立新的块格式化上下文。

  • MDN上对BFC的描述

块格式化上下文(Block Formatting Context,BFC) 是 Web 页面的可视 CSS 渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。

  • 更加通俗的描述
  1. BFC 是 Block Formatting Context (块级格式上下文),可以理解成元素的一个“特异功能”。
  2. 该 “特异功能”,在默认的情况下处于关闭状态;当元素满足了某些条件后,该“特异功能”被激活。
  3. 所谓激活“特异功能”,专业点说就是:该元素创建了 BFC (又称:开启了 BFC )。

BFC作用

  • 元素开启 BFC 后,其子元素不会再产生 margin 塌陷问题

  • 元素开启 BFC 后,自己不会被其他浮动元素所覆盖。

  • 元素开启 BFC 后,就算其子元素浮动,元素自身高度也不会塌陷

如何开启BFC

  • 根元素 :body

  • 浮动元素 :float:left/right;

  • 绝对定位、固定定位的元素 :position:absolute/fixed;

  • 行内块元素 :display:inline-block;

  • 表格单元格: table 、 thead 、 tbody 、 tfoot 、 th 、 td 、 tr 、 caption display:table;

  • overflow 的值不为 visible 的块元素 :overflow:hidden/auto/scroll;

  • 伸缩项目 :父元素设置 display:flex;

  • 多列容器 :column-count:1;

  • column-span 为 all 的元素(即使该元素没有包裹在多列容器中)

  • display 的值,设置为 flow-root

其中display:flow-root的副作用最低,但是ie不支持 image.png image.png