关于BFC

lordharrd 发布于2019-08-28 18:18 / 3166人阅读

摘要：简单理解就是一种渲染规则，规定了页面上元素如何渲染，元素与元素之间的关系。接上条规则垂直顺序排列的元素的距离取决于的大小。的元素内外互不影响。高度包含浮动元素高度。相邻的两个元素的会重叠。

1.什么是BFC?

  BFC是Block farmatting context 的简写。翻译过来即：块级格式化上下文。farmatting context
   简单理解就是一种渲染规则， 规定了页面

上元素如何渲染，元素与元素之间的关系。具体就BFC来说，此规则或者说此渲染区域具有块与块之间
相互独立，内部元素互不影响的特点。




  BFC的布局规则：

内部元素会在垂直方向按顺序排列。

接上条规则,垂直顺序排列的元素的距离取决于margin的大小。相邻的两个元素的margin会重叠。

每个元素的左边会尽可能的去接触盒子（形成BFC的元素）的左边。

BFC的元素不会和float的元素重叠。

BFC的元素内外互不影响。

BFC高度包含浮动元素高度。

2.如何生成BFC

 常见的：

float属性为非none时，如left,right。

position属性为fixed或者absolute时。

display属性为inline-block或者为table-cell时。

overflow为非visible时。

3.BFC有什么用？

1.可以清除浮动：

//清除浮动前的代码：
//css:
    .box{
            border:1px solid red;
            width: 400px;
        }
    .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
 //html

 可以看到边框为红色的div因为浮动塌陷了，我们给此div加上overflow：hidden,形成BFC:

//css
  .box{
            border:1px solid red;
            width: 400px;
            overflow: hidden;
        }
        .inner-box{
            float: left;
            width: 200px;
            height: 100px;
            background: #ccc;
        }
        
//html:

 可以看到div被撑起来了。用的以下规则：

BFC高度包含浮动元素高度。

2.左边固定，右边自适应布局：

 //css
   .box{
        border:1px solid red;
        width: 400px;
        height: 300px;
        position: relative;
    }
    .a{
        float: left;
        width: 200px;
        height: 100px;
        background: olivedrab;
    }
    .b{
        background: #777;
        height: 300px;
    }
    
    //html:
         
            我是a
            我是b

(可以用这个做做文字环绕图片什么的。。)

再看加上float,形成BFC:

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{
            float: left;
            width: 200px;
            height: 100px;
            background: olivedrab;
        }
        .b{
            background: #777;
            height: 300px;
            overflow: hidden;
        }
        
//html

    我是a
    我是b

左边就自适应宽度了。规则：

overflow为非visible时。

3.解决margin重叠问题：

//css
 .box{
            border:1px solid red;
            width: 400px;
            height: 300px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        
//html

    我是a
    我是b

 看代码可以知道a的margin-bottom加b的margin-top 等于 100+100，然而空白区域只有100像素。这就是发生了margin重叠！
 
 那我们如何来解决这个问题呢？我们知道有这个规则：

接上条规则,垂直顺序排列的元素的距离取决于margin的大小。相邻的两个元素的margin会重叠。

 那我们反其道而行之不就行了吗！ 于是我们改造结构，让a和b不在同一个BFC内：

//css

  .box{
            border:1px solid red;
            width: 400px;
        }
        .a{

            width: 400px;
            height: 100px;
            background: olivedrab;
            margin-bottom: 100px;
        }
        .b{
            background: #777;
            height: 100px;
            overflow: hidden;
            margin-top: 100px;
        }
        .b-box{
            overflow: hidden;
        }
        
//html



    我是a
    
        我是b

可以看到，距离为200PX了。

---------------------------------------结束分割线--------------------------------------------------------------------

以前总是听别人说BFC，专门了解了一下写了此文章。忘了拿出来看看。说不定面试也会问到一些呢。- - 暂时就写到这里了。有什么问题请多多吐槽。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111156.html

关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

shixinzhang 2019-08-29 16:34 评论0 收藏0
关于CSS里BFC特性的理解和应用

摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。而，块级格式化上下文，就是一个块级元素的渲染显示规则。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。什么是BFC（Block Formatting Context） Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念...

vspiders 2019-08-02 11:24 评论0 收藏0
关于BFC的一些应用

摘要：关于的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的是关于它的一些技巧性应用，通过示范比较常会接触到的排版布局方面的需求来说明下。对于结构有一点要求，触发的元素必须位于最后一位。关于Block Formatting Context(BFC)的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的...

Java_oldboy 2019-08-28 18:25 评论0 收藏0
关于BFC的一些应用

摘要：关于的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的是关于它的一些技巧性应用，通过示范比较常会接触到的排版布局方面的需求来说明下。对于结构有一点要求，触发的元素必须位于最后一位。关于Block Formatting Context(BFC)的概念性介绍就不赘述了，网上有很多关于此的介绍，后面也罗列了些个人认为很不错的文摘。那今天要说的...

CntChen 2019-08-01 14:58 评论0 收藏0
关于BFC的总结

摘要：虽然工作这么多年了，但是如果让我直接解释一下什么是的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。两个兄弟盒之间的垂直距离由属性决定。最常见的有简称和简称。虽然工作这么多年了，但是如果让我直接解释一下什么是BFC的时候，还是感觉有点不知道怎么准确的表达，下面就翻翻文档，总结一下，加深一下认识吧。大家也可以关注我的GitHub后续的更新 1.BFC...

chadLi 2019-08-29 15:27 评论0 收藏0