乐趣区

关于前端:关于BFC

什么是 BFC?

BFC(Block Formatting Context)块级格式化上下文,是一个独立的渲染区域,规定了外部的盒子如何布局,且不会被外界影响。在一个 BFC 中,行盒与块盒沿着父元素边框排列。

如何造成 BFC

  • float 的值不是 none。
  • position 的值不是 static 或者 relative。
  • display 的值是 inline-block、table-cell、flex、table-caption 或者 inline-flex
  • overflow 的值不是 visible

BFC 规定

  • 外部的 Box 会在垂直方向,一个接一个地搁置。
  • Box 垂直方向的间隔由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会产生重叠。
  • 每个盒子(块盒与行盒)的 margin box 的右边,与蕴含块 border box 的右边相接触 (对于从左往右的格式化,否则相同)。即便存在浮动也是如此。
  • BFC 的区域不会与 float box 重叠。
  • BFC 就是页面上的一个隔离的独立容器,容器外面的子元素不会影响到里面的元素。反之也如此。
  • 计算 BFC 的高度时,浮动元素也参加计算。
退出移动版