CSS中的BFC详解

一、何为BFC

　　BFC（Block Formatting Context）格式化上下文，是web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。

二、形成BFC的条件

　　1、浮动元素：float除none以外的值。

　　2、定位元素：position（absoluted,fixed）

　　3、display为以下其中之一的值inline-block、table-cell、table-caption

　　4、overflow除了visible以外的值hidden、auto、scroll

三、BFC的特性

　　1、内部的Box会在垂直方向上一个接一个的放置。

　　2、垂直方向上的距离有margin决定

　　3、bfc的区域不会与float的元素区域重叠

　　4、计算bfc的高度时，浮动元素也参与计算

　　5、bfc就是页面的一个独立容器，容器里面的子元素不会影响到外面元素

四、案例

（1）BFC中的盒子对齐

特性的第一条：内部的Box会在垂直方向上一个接一个的放置

 

浮动的元素也是这样，box3浮动，他依然接着上一个盒子垂直排列。并且所有的盒子都左对齐

html:

　　<div class="container">

　　　　<div class="box1"></div>

　　　　<div class="box2"></div>

　　　　<div class="box3"></div>

　　　　<div class="box4"></div>

　　</div>

css:

　　div{height:20px;}

　　.container{　　

　　　　position:absolute;/*创建一个BFC环境*/

　　　　height:auto;

　　　　background-color:#eee;

　　}

　　.box1{

　　　　width:400px;

　　　　background-color:red;

　　}

　　.box2{

　　　　width:300px;

　　　　background-color:green;

　　}

　　.box3{

　　　　width:100px;

　　　　background-color:yellow;

　　　　float:left;

　　}

　　.box4{

　　　　width:200px;

　　　　height:30px;

　　　　background-color:purple;

　　}