小课堂之BFC是什么以及如何使用？

1.背景介绍

       BFC就是一种布局方式.全称就是BOX、Formatting Context

     1  Box 是 CSS 布局的对象和基本单位， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box，会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

接下来让我们看看有哪些盒子：

    2  block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；

inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；

run-in box: css3 中才有， 这儿先不讲了。

一个块级格式化上下文[BFC]是可视化CSS渲染网页的一部分， 它是一个区域，块级布局，相互浮动在这个区域发生。

2.知识剖析

      MDN解释： A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other，一个块级格式 化上下文[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。

通俗的讲，就是一个div内部，我们用float和margin布局元素。

BFC(BLOCK FORMATTING CONTEXT)

     可以理解为一个作用范围，在一个BFC里的布局与其之外的布局不相关或者说不相互影响。 有一个形象的例子可作参考：

把一个页面想象成大的集装箱，这个集装箱里装的货物就是html元素。在现实生活中为了避免不同人的货物相互 混淆，都是把 货物打好包装再装入集装箱，这样的话无论你包装里面的货物怎么摆放，都不会影响到其他人的 货物。那么这个包装就可以被想象成Block Formatting Context。

      如何触发BFC（这里讲一下，这里的触发并不是说我们需要做一些什么设置，而是当它的属性值刚好满足某些条件的时候，它会拥有这些特性，这些特性，我们称为BFC）

*position为absolute 或者fixed （总结为 脱离文档流）

*float不为none（也是要脱离文档流） 

*the root element or something that contains it(根元素可产生独立BFC)

*display值为：inline-block,table-cell,table-caption,flex,inline-flex(flex和inline-flex是css3的特性) 

*overflow:不为visible的任何其他值 

*fieldset元素

3.常见问题

     高度塌陷问题，就是子元素里面元素都为浮动的时候，父元素如果设置了背景色的话效果就是只有一条线。

4.解决方案

      利用 clear属性，清除浮动 使父容器形成BFC，然后

5.编码实战

    css部分

.container{

            margin: 30px auto;

            width:600px;

            height: 300px;

            clear: both;

        }

        .p{

            border:solid 3px #a33;

        }

        .c{

            width: 100px;

            height: 100px;

            background-color: #060;

            margin: 10px;

            float: left;

        }

        .floatfix{

            *zoom:1;

        }

        .floatfix:after{

            content:"";

            display:table;

            clear:both;

        }

html

<div class="container">

            <div class="p floatfix">

            <div class="c"></div>

            <div class="c"></div>

            <div class="c"></div>

        </div>

         </div>

自适应两栏布局

<style>

     body {

         width: 300px;

         position: relative;

     }

     .aside {

         width: 100px;

         height: 150px;

         float: left;

         background: #f66;

     }

     .main {

         height: 200px;

         background: #fcc;

     }

    </style>

                    <div class="aside"></div>

                     <div class="main"></div>

这里只是讲部分代码展示出来。。大家还可以更多的思考。

       上面中的例子我们可以看出，每个元素的margin box的左边与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如 此，因此，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。

6.扩展思考

      Block Formatting Context在产生什么作用

     1.Block Formatting Context可以阻止边距折叠（margin collapsing）。

     2.Block Formatting Context可以包含内部元素的浮动。

      其实以上的几个例子都体现了BFC布局规则第五条：BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。 避免margin重叠也是这样的一个道理。

7.参考文献

     参考一：Haorooms 

http://www.haorooms.com/post/css_BFC_bgdiv

    参考二：tuicool

http://www.tuicool.com/articles/uUfYNr

    参考三：前段开发博客

http://caibaojian.com/bfc.html

8.更多讨论

两个独立的BFC之间会不会折叠