BFC

Posted liufuyuan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了BFC相关的知识,希望对你有一定的参考价值。

一、BFC

  1.BFC(Block formatting context)直译为“块级格式化上下文”。

    1)它是一个独立的渲染区域,只有Block-level box(块)参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干;

    2)是Web页面中盒模型布局的CSS渲染模式;它的体系属于常规文档流。

  2.BFC的布局规则

    1)内部的Box会在垂直方向,一个接一个地放置;

    2)Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠;

    3)每个元素的margin box的左边, 与包含块border box的左边相接触;

    4)BFC的区域不会与float box重叠;

    5)BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素;

    6)计算BFC的高度时,浮动元素也参与计算。

  3.哪些元素或属性能触发BFC

    1)根元素(html)

    2)float属性不为none position为absolute或fixed

    3)display为inline-block, table-cell, table-caption, flex, inline-flex

    4)overflow不为visible

  4.BFC的作用 

    1)自适应两栏布局

    2)清除内部浮动

    3)防止margin上下重叠

  5.创建BFC

    如果想要创建一个新的BFC,只需要给它添加上面提到的任何一个CSS样式就可以了。

    例如,请看下面的HTML:

       <div class="container"> Some Content here </div>

      一个新的BFC可以通过给容器添加任何一个触发BFC的CSS样式,如overflow: scroll, overflow: hidden, display: flex, float: left,或者 display: table来创建;

      display:table可能会产生一些问题

      overflow:scroll可能会显示不必要的滚动条

      float:left将会把元素置于容器的左边,其他元素环绕着它

      overflow:hidden将会剪切掉溢出的元素

      所以每当想要创建一个新的BFC的时候,我们会基于我们的需求选择最好的样式条件。

以上是关于BFC的主要内容,如果未能解决你的问题,请参考以下文章

BFC 神奇背后的原理

BFC理解余应用

BFC 神奇背后的原理

BFC 神奇背后的原理

什么是BFC?

前端精选文摘:BFC 神奇背后的原理