189 8069 5689

BFC的形成条件和特性分析-创新互联

初学CSS时，我们学到很多有意思的CSS规则，比如外边距塌陷，还有浮动元素的一些特性等，其实这些规则背后都是BFC这个东西在控制，下面我们来看下BFC到底是什么。

创新互联是专业的潘集网站建设公司，潘集接单;提供成都做网站、网站制作,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行潘集网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

什么是BFC

BFC（Block formatting contexts），翻译过来就是块级格式化上下文，指的是一种上下文环境，我们暂且不管它为什么叫这么晦涩冗长的名字，先看看哪些情况能形成BFC，然后看看它有哪些特性，这样我们也就知道它是什么了。就像我们学习js的对象一样，了解一个对象的原型，以及它的属性方法，我们也就知道它是什么了。

如何形成BFC

根据W3C的定义：浮动元素，绝对定位元素，非块级盒子的块级容器（例如inline-blocks，table-cells，and table-captions），以及overflow属性值不是“ visible”（visible是overflow的默认值）的块级盒子（视口除外），这些元素就会为他们的内容创建一个BFC。

BFC的特点

在一个BFC中，垂直方向上，盒子是从包含块顶部开始一个挨着一个布局的，两个相邻的盒子的垂直距离是由margin属性决定的，在一个BFC中的两个相邻的块级盒子的垂直外边距会产生塌陷。
在一个BFC中，水平方向上，每个盒子的左边缘都会接触包含块的左边缘（从右向左的格式则相反）。除非出现浮动元素和其他元素相互作用的情况（新航道雅思培训当有浮动元素时，行盒可能因浮动元素而收缩，如果有盒子形成了新的BFC，那这个盒子也可能因浮动元素而变窄）。
这样我们终于知道为什么《精通CSS》里提到外边距塌陷时，为什么设置这么多的条件了：

  1. 处于文档流中的块级元素

  2. 垂直外边距直接相遇

其中第一个条件就是为了防止形成BFC，我们要注意的是BFC内部的子元素之间可以形成外边距塌陷，但BFC元素和其他块级元素是不能形成外边距塌陷的。

BFC的应用

BFC的应用场景比较多，在这里列一些我临时想到的

  1. 清除元素之间的影响
    如果想让一个元素不受另一个元素的影响，可以把其中一个元素放到BFC环境中。
    eg：我们都知道文本会围绕着浮动元素布局，如下图所示

    
    .out{        width: 200px;        height: 200px;        border: 1px solid blue;
    }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
    }
我是文本我是文本我是文本我是文本我是文本我是文本我是文本 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本

如果我们不想让文本环绕，只想让文本位于右侧，怎么处理呢？
只需要在文本外套一层元素，并且把这个元素变成BFC，这样文本就不会受到浮动元素的影响了。我这里通过修改overflow属性使文本所在元素形成一个BFC。


        .out{            width: 200px;            height: 200px;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }        .inner{            overflow: auto;
        }    

    
我是文本我是文本我是文本我是文本我是文本我是文本我是文本 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本

防止块级元素之间外边距塌陷的方法之一就是利用刚才说的第一个条件，也是同样的原理，形成一个BFC，在这里就不再说了。

  1. 清除内部浮动元素对父级元素的影响
    eg：

    
    .out{        border: 1px solid blue;
    }    .f{        width: 50px;        height: 50px;        background: red;        float: left;
    }

    效果图：


如果想让外部元素包含浮动元素，只需将外部元素设置为BFC


        .out{            overflow: auto;            border: 1px solid blue;
        }        .f{            width: 50px;            height: 50px;            background: red;            float: left;
        }    

效果图：

  1. 创建自适应布局
    如果我们想创建一个两列布局，其中左侧宽度不定，右侧宽度自适应占用剩下的空间，有一种方法就是利用浮动元素和BFC元素的相互作用实现的。

    html,body{        width: 100%;        height: 100%;
}    .out{        background: blue;        width: 100%;        height: 100%;
    }    .f{        float: left;        margin-right: 20px;        height: 100%;        background: red;
    }    .r{        overflow: auto;        height: 100%;        background: yellow;
    }
    
浮动元素

    效果图：


总结

BFC是很多CSS规范背后的原理，所以有必要搞清楚BFC。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


当前标题：BFC的形成条件和特性分析-创新互联
URL分享：http://cdxtjz.cn/article/cdhgpd.html

其他资讯