CSS BFC学习笔记

BFC，全称是Block Formatting Context，块级格式化上下文。
具体是什么，可以理解为页面元素的一种特性，触发了BFC的元素往往会产生一些对初学者而言意想不到的效果。
触发BFC的方法有下面几种，满足其中任意一种就能触发BFC：

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

一、外边距合并

有以下结构的html

这是一个段落

这是一个段落

CSS 如下

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

产生效果：
vc/yyc+jrGRpdrXEsd++4Na709AxMHB4tviyu8rHwb249jEwcHijrNXixuTKtcrH0vLOqsv7w8ey+sn6wcvN4rHfvuDW2LX+oaM8YnIgLz4NCrzytaW12Mu1o6zN4rHfvuC6z7Ki1ri1xMrHo6zU2sbVzajOxLW1wffW0KOstbHBvbj2PHN0cm9uZz60udaxPC9zdHJvbmc+zeKx377gz+DT9sqxo6zL/MPHvavQzrPJ0ru49s3isd++4KGjus+yorrztcTN4rHfvuC1xLjftsi1yNPawb249reiyfq6z7KitcTN4rHfvuC1xLjftsjW0LXEvc+089XfoaM8YnIgLz4NCsjnus6x3MPi1eLW1tCnufu1xLeiyfrE2KOs1eK9q9L9s/ZCRkO1xLXa0ru49szY0NSjujwvcD4NCjxoMyBpZD0="阻止和子元素发生外边距折叠">阻止和子元素发生外边距折叠

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

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

再看效果

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

二、高度塌陷

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

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;
        }

产生效果：

三、元素被浮动元素覆盖

这个问题同样出现在有浮动元素的时候：

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的元素将具有以下特点：

最后需要说明的是IE7以下浏览器中并不支持BFC，而是有其特有的hasLayout，它和BFC很相似，但产生了很多问题。触发hasLayout的方式之一是使用zoom: 1，所以使用的时候最好加上zoom: 1，保证兼容性。