BFC原理

作者: 放风筝的小小马 | 来源:发表于2017-05-18 17:27 被阅读67次

BFC是什么?

了解BFC之前,先了解Box,Formatting Content的概念

  1. Box:CSS布局的基本单位
    Box是CSS布局的对象和基本单位,可以理解为一个页面就是有很多个Box组成的。元素的类型display属性决定了Box的类型;一个不同类型的Box,会参与不同Formatting Content(一个决定如何渲染文档的容器),因此Box内的元素会以不同方式进行渲染,主要的Box有以下几种:
  • Block-level box:display属性为block、list-item、table的元素,会生成Block-level box。并且参与Block Formatting Content
  • Inline-level box:display属性为inline、inline-block、inline-table的元素,会生成Inline-level box。并且会参数Inline Formatting Content
  • Run-in box:css3才有
  1. Formatting Content
    是CSS2.1里面的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,决定了其子元素如何定位以及与周围元素之间的相互作用
    常见的Formatting Content有Block Formatting Content(BFC)Inline Formatting Content(IFC)
    注意:CSS2.1中只有BFC和IFC,CSS3中增加了GFC和FFC.

  2. BFC定义
    BFC直译为块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与外部毫不相干。
    注意:可以把BFC理解为一个大的盒子,其内部是由Block-level box组成的

  3. BFC的规则

  • BFC内部的Box会在垂直方向,一个接一个的设置;
  • Box垂直方向的距离由margin决定,属于同一个BFC的两个相邻box的margin会发生重叠
  • 每个元素的margin box的左边会与包含块border box的左边相接触(对于从左到右的格式化,否则相反),即使存在浮动也会如此
  • BFC的区域不会与float box的重叠
  • BFC就是页面上的一个独立容器,容器里面的元素不会影响到外面的元素,反之亦然。(这一点很重要,要牢牢记住)
  • 计算BFC的高度时,浮动元素也参与计算

BFC由什么条件创立?

  • 根元素或其它包含它的元素
  • float属性不为none
  • position属性为absolute或fixed
  • display属性为inline-block、table-cell、table-caption、flex、inline-flex
  • overflow属性不为visible

BFC的用途

  1. 自适应两栏布局
<style >
body{
  position: relative;
  height: 400px;
}
.aside{
  height: 200px;
  width: 200px;
  background-color: pink;
  float: left;
}
.main{
  background-color: grey;
  height: 300px;
}
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果:

Paste_Image.png

根据BFC布局规则的第三条:

每个元素的margin box的左边,与包含块border box的左边相接触(对于从左到右的格式化,否则相反)。即使存在浮动也是如此

因此,即使存在浮动的aside,但是main还是与包含块的左边相接触;
按照BFC布局的第四条规则:

BFC的区域不会与float box重叠

因此,可以通过使main触发BFC,来实现自适应两列布局

.main{
  overflow: hidden;
}

当main触发BFC后,其不会与浮动的aside重叠。因此会根据包含块的宽度和aside的宽度,自动变窄,效果如下:

Paste_Image.png
  1. 清除内部浮动
    当子元素均浮动时,其无法撑开父元素,这是可以让父元素生成BFC,如下:
<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

显示:

Paste_Image.png

根据BFC布局规则的第六条:

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

因此为了达到清除内部浮动,可以让.par触发BFC,那么计算par的高度时,浮动元素也参与计算,par就被撑开了;
代码:

.par{
    overflow: hidden;
}

显示:

Paste_Image.png
  1. 防止marin重叠
    代码:
<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

页面:

Paste_Image.png

可以发现,两个p元素之间的垂直margin出现了重叠;
根据BFC的第二条规则:

Box垂直方向的距离由margin决定,属于同一BFC的两个Box会发生margin重叠

因此,可以在其中一个p上包裹容器,然后触发其BFC,这样两个p就不在同一个BFC,因此就不会发生重叠

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

效果如下:

Paste_Image.png

总结

以上几个例子都体现了BFC的第五条规则:

BFC就是页面上一个隔离的独立容器,容器内的子元素不会影响外部的元素,反之亦然。

因为BFC内部的元素不会影响外部的元素,因此当BFC外部有浮动元素时,BFC为了不影响内部Box的布局,BFC会通过变窄,避免与浮动元素重叠;同样的,当BFC内部有浮动时,为了不影响外部元素的布局,BFC计算高度时会包括浮动元素的高度。避免margin重叠也是如此

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

相关文章

  • 布局

    两栏布局(bfc)demo 原理:BFC的区域不会与float box重叠。通过触发main生成BFC, 来实现自...

  • BFC(边距重叠解决方案)

    BFC基本概念:块级格式化上下文。BFC的原理: 在BFC这个元素的垂直方向的边距发生重叠; BFC的区域不会与浮...

  • css

    描述BFC(块格式化上下文)及其工作原理。 BFC 即 Block Formatting Contexts (块级...

  • BFC 原理

    BFC全称是Block Formatting Context,即块格式化上下文,是 W3C CSS2.1 规范中的...

  • BFC原理

    BFC是什么? 了解BFC之前,先了解Box,Formatting Content的概念 Box:CSS布局的基本...

  • BFC 原理

    定义块级格式化上下文 特性具有 BFC 特性的元素可以看做是隔离的独立容器,容器里面的元素不会子啊布局上面影响到外...

  • 第三章 一面/二面

    3-1 页面布局 (一) 3-4 css盒模型 BFC(边距重叠)块级格式化上下文BFC的原理:1.BFC元素垂直...

  • 理解BFC原理

    1.什么是BFC? Formatting Context:指页面中一个渲染区域,并且拥有一套渲染规则,他决定了其子...

  • css BFC原理

    BFC 神奇背后的原理[https://www.cnblogs.com/heimanba/p/3774086.ht...

  • 前端系列知识目录

    CSS系列??? 10 分钟理解 BFC 原理 JavaScript系列学习??? 进阶篇 ? JavaScirp...

网友评论

    本文标题:BFC原理

    本文链接:https://www.haomeiwen.com/subject/lzcsxxtx.html