BFC 小结

最近对一些基础知识进行了整理，下面是针对 BFC 的一些整理以及本人对 BFC 的一些理解。

1. 首先，什么是 BFC 呢？

BFC，Block formatting context，直译为“块级格式化上下文”。
**在说 BFC 之前，我们首先要弄懂什么是 formatting context？ **
fomating context：格式化上下文，是W3C CSS2.1规范中的一个概念，拥有一套渲染规则。对内来约束其内块级元素的布局，对外来控制和外部元素的布局。通俗一点的讲，它就是页面中的一块渲染区域，规定了其子元素将如何定位，以及和其他元素的关系和相互作用。

最常见的 Formatting context 有 Block fomatting context (简称 BFC ) 和 Inline formatting context (简称 IFC )。

CSS2.1 中只有BFC和IFC, CSS3中还增加了GFC（GridLayout Formatting Contexts，直译为"网格布局格式化上下文"）和FFC（Flex Formatting Contexts，直译为"自适应格式化上下文"）。IFC、GFC、FFC 在这里就不进行详细解释了。

既然有四种渲染规则，那么我们就需要知道在什么情况下会采用哪种渲染规则，box 作为 css 布局的对象和基本单位，它的类型，由其元素的类型和 display 属性决定。不同类型的 box，会参与不同的 fomating context（一个决定如何渲染文档的容器），以不同的方式渲染。那么，都有哪些类型的盒子呢？
① block-level box : display属性为block, list-item, table的元素，会生成block-level box，参与BFC。
② inline-level box: display属性为inline, inline-block, inline-table的元素，会生成inline-level box，参与IFC。
③ run-in box : run-in : 根据上下文决定对象是内联对象还是块级对象。（CSS3）

block：块级元素，默认不加修饰的情况下块级元素并不会被收缩包裹其内容，其宽会充斥父元素，高度由自身内容撑开（inline 行内元素会“收缩包裹” 其内容，并且会尽可能包紧）。每个块级元素即使设置了宽度，不占满父元素也会自己占据一行，不让其后元素与自己并行。

说了这么多，我们回到正题：
BFC 就是一个独立的渲染区域，规定了Block-level内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
通俗一点的讲， BFC 就是相当于一个把浮动元素框起来并隔离的容器，容器里面的子容器不会影响到外面的元素，使浮动不会溢出。

2. BFC 布局规则

1. 内部的 box 会在垂直方向，一个接一个的放置。
2. 每个元素的 margin box 的左边，与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）。即使存在浮动，也是如此。
3. BFC 的区域不会与float box 重叠。
4. BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此。
5. 计算 BFC 的高度时，浮动元素也参与计算

3. 哪些元素会生成 BFC ？

1. 根元素
2. float 的值不为 none
3. overflow 的值不为 visible
4. display 的值为 inline-block、table-cell、table-caption、flex、inline-flex
5. position 的值为 absolute、fixed

4. BFC 的作用及原理

（1） 自适应两栏布局

代码：

     body {
        position: relative;
     }
     .aside {
        width: 300px;
        height: 200px;
        float: left;
        background: #f66;
     }

     .main {
        height: 250px;
        background: #fcc;
        overflow: hidden;   /* 通过触发main生成BFC， 来实现自适应两栏布局，BFC的区域不会与float box重叠 */
     }

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

（2） 清除内部浮动

代码：

     .par {
        border: 5px solid #fcc;
        width: 300px;
        overflow: hidden;   /* 触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算 */
     }

     .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
     }

	 <div class="par">
        <div class="child"></div>
        <div class="child"></div>
     </div>

（3） 防止垂直 margin 重叠

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
代码：

    /* 若没有 .wrap ，会发生 margin 重叠，两个p上下之间的距离为30px */
    /* 在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。 */
     .wrap {
        overflow: hidden;			 /*  防止垂直margin重叠 */
     }
     p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
     }

     <p>Haha</p>
     <div class="wrap">
         <p>Hehe</p>
     </div>

总结

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

想看以上例子的网页实现效果，请点这里

本文链接：http://www.cnblogs.com/xsilence/p/5690093.html