一、何為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中的盒子對齊
浮動的元素也是這樣，box3浮動，他依然接著上乙個盒子垂直排列。並且所有的盒子都左對齊
html:
css:
div.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;
CSS中的BFC詳解
引言 一 何為bfc bfc block formatting context 格式化上下文，是web頁面中盒模型布局的css渲染模式，指乙個獨立的渲染區域或者說是乙個隔離的獨立容器。二 形成bfc的條件 1 浮動元素，float 除 none 以外的值 2 定位元素，position absolu...
CSS中的BFC解析
bfc 即塊級格式上下文 block formatting context 它是指乙個獨立的塊級渲染區域，只有block level的box參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。css2.1規定滿足一下條件之一就會生成bfc 根元素float的值不為none overf...
CSS中重要的BFC
css中有個重要的概念bfc，搞懂bfc可以讓我們理解css中某些原本看似詭異的地方。在解釋bfc之前，先說一下文件流。我們常說的文件流其實分為定位流 浮動流 普通流三種。而普通流其實就是指bfc中的fc。fc formatting context 直譯過來是格式化上下文，它是頁面中的一塊渲染區域，...