CSS扫盲——BFC

  • 2018-11-22
  • 80
  • 0

什么是BFC和IFC?

BFC与IFC的参与者


Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

在普通流中的盒子会参与一种格式上下文,这个盒子可能是块盒也可能是行内盒,但不可能同时是块盒又是行内盒。块级盒参与块级格式上下文(BFC),行内级盒参与行级格式上下文(IFC)。

什么是BFC?

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。

如何生成

它的形成由浮动,绝对定位元素,和display属性为inline-boxs、table-cells、table-captions的不是块盒的块容器(除非这个值已经被传播到视口),以及当overflow不为visible的块盒才会为它的内容创建新的BFC。
梳理下:

  • float 的值不为 none
  • position 的值不为 static 或 relative
  • display 的值为 table-cell、table-caption、inline-block、flex 或 inline-flex
  • overflow 的值不为 visibility

特性

1.在BFC中,盒子都是从它的包含块的顶部一个一个的垂直放置的。两个相邻盒子的垂直间距决定于margin属性。在BFC中,两个相邻块级盒子之间垂直方向上的外边距是会塌陷的。

2.在BFC中,每个盒子的左外边界挨着包含块的左边界(对于从右到左的格式化,则为右边界互相挨着)。即使是存在浮动元素也是如此(即使一个盒子的行盒是因为浮动而收缩了的),除非这个盒子建立了一个新的BFC(在某些情况下这个盒子自身会因为浮动而变窄)。

作用

通常会用BFC来解释以下2个问题:

  1. margin collapse:上下margin会合并
  2. contain float: 其中的一种解决方法:overflow:hidden ,创建新的BFC,可以包含float元素,父元素就有高度值了
    此处阐述一下自己的理解:如果父元素只包含浮动元素,因为浮动元素是不包含在正常流的,浮动孩子将会脱离页面的常规流,因此父元素相当于不包含任何元素,高度为0。

规则
1、BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
2、计算BFC的高度时,浮动元素也参与计算
overflow:hidden会产生新的BFC,子元素的被包含在父元素的BFC中,因此父元素不受子元素影响,恢复常规布局,遵循BFC规则,同时计算高度时,父元素的高度会将浮动元素算进来,因此父元素有了高度。

不过这里要阐述一件事就是高度塌陷只出现在父元素包含且只包含浮动元素的时候:

看图:在父元素没有明确定义height的时候,如果只包含浮动元素,父元素会出现高度塌陷的问题。(其中的解决方法主要有添加伪元素clear:both,设置父元素height,设置父元素overflow:hidden等方式)

基本作用

  • 1.解决margin重叠–新建一个bfc
  • 2.清除浮动(准确是清除浮动带来的副作用)
  • 3.用于布局

很多东西日常开发也用到,但是你不去了解原理只知其然而不知其所以然,了解到原理才能更好的提高开发效率

评论

还没有任何评论,你来说两句吧

- 友情链接 - Theme by Qzhai