CSS BFC学习笔记

BFC，全称是Block Formatting Context，块级格式化上下文。

详细是什么，能够理解为页面元素的一种特性。触发了BFC的元素往往会产生一些对刚開始学习的人而言意想不到的效果。

触发BFC的方法有下面几种，满足当中随意一种就能触发BFC：

• 浮动元素（float除了none以外随意值）
• 绝对定位元素（position为absolute或fixed）
• display为inline-block或table-cell或table-caption
• overflow为除了visible以外的其它值（hidden、auto或scroll）

那么BFC有哪些特点呢，为什么要触发BFC呢？ 先从几种现象说起吧。

一、外边距合并

有下面结构的html

<div>
    <p>这是一个段落</p>
</div>
<div>
    <p>这是一个段落</p>
</div>

CSS 例如以下

        body{
            margin: 0;
        }
        div{
            background-color: #2595e5;
            margin: 10px 0 10px;
        }
        p{
            background-color: #ff9900;
            margin: 10px 0 10px;
        }

产生效果：



代码里给div和p都加上了上下边距，可是产生的结果来看好像p标签的上下边距并没有生效，并且在垂直方向上，div的边距仅仅有10px而不是两个10px，这事实上是由于他们产生了外边距重叠。

简单地说，外边距合并指的是，在普通文档流中，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

怎样避免这样的效果的发生呢。这将引出BFC的第一个特性：

阻止和子元素发生外边距折叠

给div加上overflow：hidden属性。即触发BFC的第四个条件：

        div{
            background-color: #2595e5;
            margin: 10px 0 10px;
            /*触发BFC*/
            overflow: hidden;
        }

再看效果



由此可见。触发了BFC的元素，不和它的子元素发生外边距折叠。

二、高度塌陷

在使用浮动的时候，常常会出现这样的情况：

<div class="outer">
    <div class="inner"></div>
</div>

CSS：

        body{
            margin: 0;
        }
        .outer{
            background-color: #2595e5;
            border: 1px solid #f00;
        }
        .inner{
            background-color: #ff9900;
            width: 50px;
            height: 50px;
            float: left;
        }

效果：



能够看到outer的高度是0，并没有算上内部浮动的inner，这样的现象称之为高度塌陷。

BFC将能解决问题，这就是BFC的第二个特性：

包括浮动元素

相同的给outer加上overflow：

        .outer{
            background-color: #2595e5;
            border: 1px solid #f00;
            /*触发BFC*/
            overflow: hidden;
        }

产生效果：

三、元素被浮动元素覆盖

这个问题相同出如今有浮动元素的时候：

<div class="left"></div>
<div class="right"></div>

CSS:

        body{
            margin: 0;
        }
        .left{
            width: 50px;
            height: 50px;
            background-color: #2595e5;
            float: left;
        }
        .right{
            background-color: #ff9900;
            width: 100px;
            height: 100px;
        }

产生效果：



能够看到，浮动的元素覆盖在了其相邻元素上。解决问题将引出BFC的第三个特性：

阻止元素被浮动元素覆盖

对right加入overflow属性：

        .right{
            background-color: #ff9900;
            width: 100px;
            height: 100px;
            /*触发BFC*/
            overflow: hidden;
        }

效果：



这个感觉跟给right也加了float: left一样，由于使用float: left相同会触发BFC（第一个条件）

当然这个情况仅仅出如今两个元素宽度之和不大于父元素宽度的时候。不然right会换行。

总结

总结一下，触发了BFC的元素将具有下面特点：

1. 阻止和子元素外边距折叠
2. 包括浮动元素
3. 阻止元素被浮动元素覆盖

最后须要说明的是IE7下面浏览器中并不支持BFC，而是有其特有的hasLayout，它和BFC非常类似，但产生了非常多问题。

触发hasLayout的方式之中的一个是使用zoom: 1。所以使用的时候最好加上zoom: 1，保证兼容性。