关于bfc的一点理解

title: bfc的一点理解date: 2014-06-21 16:17:44tags: css

---

一.bfc概念

关于bfc的定义，在w3c的官方文档中给出的这样的定义,下面是一段摘自博客的翻译

  浮动元素和绝对定位元素，不是块级盒子的块容器 （如 inline-blocks, table-cells, 和 table-captions），以及设置了overflow属性（除了visible）的块级盒子 ，都会为他们的内容创建新的BFC（块级格式上下文）。

  在BFC中，盒子从顶端开始垂直地 一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

  在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

官方的原文地址如下地址我也按照自己的理解来写一下,块级格式化上下文(bfc)就是建立一个独立的元素放置上下文,跟其他的元素放置上下文不同,两者不会发生一些冲突和叠加;也可以理解在一个bfc中是一个单独的盒子,他跟外界的盒子不会有相互的影响,而且在bfc里面的元素只会受该盒子的首先进行布局,不会受外界的影响

二.bfc的应用

在看了一些博客后,看到一些应用如下1.解决合并外边距的问题;2.清除元素内部浮动;3.块级格式化上下文不会重叠浮动元素

例子1:解决合并外边距的问题

对于正常的情况下,如果一个块级元素没有padding和border属性的约束,如果几个块级元素叠加在一起会发生margin的叠加效果,具体的可以看css权威指南什么的都有,就是要注意下margin可以为正也可以为负值这点的区别

    //css code
    .content{width: 300px;background-color: yellow;}
    .child{height: 100px;width: 200px;margin: 50px;}
    .child1{background-color: red;}
    .child2{background-color: blue;}
    .bfc{overflow: hidden;*zoom:1;}
    -------------------------------------------------
    //html
    /*没有添加bfc的情况下*/
    <div class="content">
        <div class="child child1">
            normal instance
        </div>
        <div class="child child2">
            BFC instance
        </div>
    </div>
    <br>
    ---------------------------------------
    /*添加了bfc的情况下*/
    <div class="content">
        <div class="bfc">
            <div class="child child1">
                normal instance
            </div>
        </div>
        <div class="bfc">
            <div class="child child1">
                normal instance
            </div>
        </div>
    </div>

下面看下代码的效果

可以看到在一般的情况下,margin都发生了重叠,而对于那些添加了bfc的子元素,都按照正常的显示出来,没有发生重叠的效果

例子2:清除元素内部浮动

对于清除浮动,这个是经常需要做的事情,因为float的元素脱离了文档的正常流,但对文档又有影响,而且不能将父元素撑开,所以一般都需要清除浮动,对于清除浮动的方法可自行网上搜

    //css
    .wrap{width: 500px;border: 1px solid red;}
    .floatL{float: left;width: 200px; background-color: blue;height: 200px;}
    .bfc{overflow: hidden;*zoom:1;}
    ---------
    /*加有bfc后的情况*/
    <div class="wrap bfc">
        <div class="floatL"></div>
        <div id="content">I'm content to make block full</div>
    </div>
    /*没有添加bfc的情况*/
    <div class="wrap">
        <div class="floatL"></div>
        <div id="content">I'm content to make block full</div>
    </div>

情况如下:

加有bfc后,会自动进行浮动清除

例子3:块级格式化上下文不会重叠浮动元素

对于浮动元素的,他是脱离的正常流,不过他还是会占据文档的位置,浮动原本的定义就是让周围的东西围绕着他,特别是文字这类的,所以一般的情况如下

(注:图片是从参考博客盗过来的==)

但是你要让文字跟图片在两侧怎么办呢?只要给文字处加个bfc就可以咯.这里的例子请参考例子

三.如何建立bfc

看了一些参考的博客之后,收集的方法如下1.float 除了none以外的值 2.overflow 除了visible 以外的值（hidden，auto，scroll ） 3.display (table-cell，table-caption，inline-block) 4.position（absolute，fixed） 5.fieldset元素

对于第一点,之前在书中也有看到过清除一个元素的浮动就是在他的父元素上也添加一个float:left的属性,其实这个原理就是建立了一个bfc//下面附上参考博文中的一段话,是对其中一些属性的解释

  需要注意的是，display:table本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。

  fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。有些浏览器bugs（Webkit，Mozilla）提到过这个触发行为，但是没有任何官方声明。实际上，即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文，开发者也不应该把这当做是理所当然的。CSS2.1没有定义哪种属性适用于表单控件，也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性，建议开发者们把这种支持当做实验性质的，更高版本的CSS可能会进一步规范这个。

最后再补充一点就是对于一些bfc的属性,在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动;在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。对于这点以后再补上

参考博文list:

1.那些年我们一起清除过的浮动

2.深入BFC

3.CSS定位机制之一：普通流

4.WSC文档

---