关于css:css之BFC机制

一，BFC 定义，

全称，block formatting content, 格式化上下文；是 web 页面中盒模型布局中的 css 渲染模式，是一个独立的渲染区域或说一个隔离的独立容器。

二，造成条件

1，浮动元素，float 除 none 以外的值。
2，定位元素，position(absolute，fixed)
3,display 为 inline-block,table-cell,table-caption(相似于表格题目标签 caption)
4，overflow 除 visible 以外 (scroll,hiddle,auto) 的值.

三，个性

1，外部的 BOX 会在垂直方向一个接着一个放。
解释：即便不在 BFC 的内的盒子也是一样的。
2，垂直方向的间隔由 margin 值决定。
解释：失常文档流中，盒子的垂直距离也是由高低盒子的最大 margin 决定的。
利用：因而能够用 overflow:hidden 触发 BFC 机制，将该属性加载父元素上。扯个题外话，用空标签也是能解决外边距合并问题。
3，BFC 区域内的元素不会和 float 元素重叠，
解释：不会被浮动元素笼罩
利用：
两栏布局：右边固定，左边自适应布局。

float: left; width: 200px;height: 300px;（右边元素）overflow: hidden;/* 创立 bfc */height: 300px;（左边元素）

三栏布局（圣杯布局）左右两边固定宽度，两头不设宽，因而两头的宽度自适应。

float: left; width: 100px; height: 300px;（右边元素）float: right; width: 100px; height: 300px;（左边元素）overflow: hidden;/* 创立 bfc*/ height: 300px;（两头元素）

4, 计算 bfc 的高度时，浮动元素也参加计算。
解释:BFC 蕴含浮动的块。
利用：利用 overflow:hidden 革除浮动嘛，因为浮动的盒子无奈撑出处于规范文档流的父盒子的 height。
5，BFC 就是页面上的一个独立容器，容器外面的子元素不会影响里面元素。
利用：解决外边距合并问题。

    <div class="container">
        <div class="wrapper">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
    </div>

.container { 
                overflow: hidden; 
                width: 100px; 
                height: 100px;
            } 
.wrapper {overflow: hidden;} 
.box1 { 
        height: 20px; 
        margin: 10px 0;
      } 
.box2 { 
        height: 20px; 
        margin: 20px 0; 
      }