布局中的BFC---重點是前言
一、前言
說實話，聽到BFC這個概念我心裏一陣咯噔，這到底是什麽？有種似曾相識的感覺，但是又很模糊。問了一下度娘，看到張鑫旭的《CSS深入理解流體特性和BFC特性下多欄自適應布局》。呀，原來是這東東啊。BFC應該是前端的基礎知識，也許很多前端er工作中經常用到，但是未必真的歸納總結過（自己躺槍），反正能完成工作就好了，沒必要非得腦海中有BFC這概念。不過我覺得，知識掌握一定的知識之後終究應該要善於總結，歸納成為體系，最後才能回歸本真，站在一定的高度去看待一個問題。
說點題外話，學前端的應該或多或少都知道張老師，不知道肯定也看過他的技術博客，他的博客寫的有趣又讓人能get到知識點，號稱一個把css玩得很6的男人。我覺得他之所以能得到業界的認可，和他善於總結歸納知識，刨根究底的態度分不開的，從他每一篇博文中就可以看出來。話說上次在《騰訊web前端大會》看到他本人，嗯，確實比照片上帥很多。
二、言歸正傳
先看一個例子，相信大家都用過。經典的兩欄布局方法。
方法很多，下面是其中一種:
<style>
body {
width: 300px;
position: relative;
}
.left{
width: 100px;
height: 150px;
float: left;
background: red;
}
.right{
height: 200px;
background: green;
overflow: hidden;
}
</style>
<body>
<div class="left"></div>
<div class="right"></div>
</body>說明：left不會浮動在right上面，主要是因為right樣式中添加了overflow:hidden，這方法我也用過，但是也沒想那麽多，就知道添加overflow:hidden能撐起來僅此而已；
三、開始
1、概念
CSS布局時，我們常常需要確定一個元素時block類型的塊元素還是inline類型的內聯元素。FC、BFC這些概念就和這些元素類型相關。FC：Formatting Context，格式化上下文，指頁面中一個渲染區域，擁有一套渲染規則，它決定了其子元素如何定位，以及與其他元素的相互關系和作用。
BFC：Block Formatting Context，塊級格式化上下文，一個獨立的塊級渲染區域，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。表現原則就是，內部子元素再怎麽翻江倒海，翻雲覆雨都不會影響外部的元素。所以，避免margin穿透啊，清除浮動什麽的也好理解了。
2、BFC生成
① float的值不為none。
② overflow的值為auto,scroll或hidden。
③ display的值為table-cell, table-caption, inline-block中的任何一個。
④ position的值為absolute或fixed
3、BFC約束規則：
1.生成BFC元素的子元素會一個接著一個防止。垂直方向上他們的起點事一個包含塊的頂部，兩個相鄰子元素之間的垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會折疊，同屬一個BFC的兩個相鄰Box的margin會發生重疊。
2.生成BFC元素的子元素中，每一個子元素左外邊距與包含塊的左邊界接觸，即使浮動元素也是如此（除非這個子元素自身也是一個浮動元素）。
3.BFC的區域不會與float的元素區域重疊。
4.計算BFC高度時，浮動元素也參與計算。
5.BFC就是頁面上一個隔離的獨立容器，容器裏面的子元素不會影響到外面元素，反之亦然。
我們在寫css常見的一些問題都可以由上面兩條推出，例如：
1.Block元素與父元素同寬，所以Block元素豎直方向上垂直排列。
2.豎直方向上有的Block元素margin會重疊，水平方向不會。
3.浮動元素會盡量接近左上方或右上方。
4.為父元素設置overflow:hidden或浮動父元素，則父元素會包含其浮動的子元素。
4、應用
上面知道了BFC的約束規則之後，我們可以利用（觸發）它來做點事情；
1、防止margin重疊，
2、清除內部浮動
3、自適應多欄布局
布局中的BFC---重點是前言