首页 > 代码库 > CSS规范中的BFC

CSS规范中的BFC

一、什么是BFC

1.Formatting context:页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及其他元素的关系和相互作用。

2.Box:css布局的基本单位。元素的类型和display属性决定了这个box的类型。不同类型的box,会参与不同的Formatting Context(决定如何渲染文档)。

  block-level box:display属性是block、list-item,table的元素,参与block Formatting context

  inline-level box:display属性是inline,inline-block,inline-table的元素,参与inline formatting context

3.BFC定义

  块级格式化上下文,他是一个独立的渲染区域,只有block-level box参与,规定了内部的block-level box如何布局,并且与这个区域外部没有关系

4.BFC布局规则

  1.内部的box会在垂直方向,一个接一个地放置

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

  3.内部每个元素的margin box的左边,与包含块border box的左边相接触,浮动也是如此

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

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

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

 

二、生成的BFC的元素

1.根元素

2.float属性部位none

3.position为absolute或fixed

4.display为table-cell,table-caption,flex,inline-flex

5.overflow不为visible

 

三、BFC的作用及原理

1.自适应两栏布局

示例代码:

     #aside{
        float: left;
        width: 400px;
        height: 400px;
        background-color:skyblue;
    }
    #main{
        height: 600px;
        background-color: grey;
    }

    <div id=‘aside‘></div>
    <div id=‘main‘></div>

内部元素的margin的左边与包含块的左边接触,效果:

技术分享

因为BFC区域不与float box重叠,设置overflow:hidden,使得main生成BFC

技术分享

 

2.清除浮动

示例代码:

    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }

    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

效果图:

技术分享

BFC计算高度时,浮动元素也会参与计算,触发par生成BFC

    .par {
        border: 5px solid #fcc;
        width: 300px;
       overflow: hidden;
    }

技术分享

 

3.防止垂直margin重叠

示例代码:

    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <p>Haha</p>
    <p>Hehe</p>

两个p标签是同一个BFC的内部box,内部相邻的box的margin发生重叠,效果:

技术分享

将p包裹一个容器,生成一个BFC,两个p就不在同一个BFC中,就不会发生折叠

   .wrap{
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }

    <div class=‘wrap‘>
        <p>Haha</p>
    </div>
    <p>Hehe</p>

技术分享

CSS规范中的BFC