bfc，全稱是block formatting context，塊級格式化上下文。
詳細是什麼，能夠理解為頁面元素的一種特性。觸發了bfc的元素往往會產生一些對剛開始學習的人而言意想不到的效果。
觸發bfc的方法有下面幾種，滿足當中隨意一種就能觸發bfc：
那麼bfc有哪些特點呢，為什麼要觸發bfc呢？ 先從幾種現象說起吧。
有下面結構的html
這是乙個段落p>
div>
這是乙個段落p>
div>css 例如以下
body
divp
**裡給div和p都加上了上下邊距，可是產生的結果來看好像p標籤的上下邊距並沒有生效，並且在垂直方向上，div的邊距僅僅有10px而不是兩個10px，這事實上是由於他們產生了外邊距重疊。
簡單地說，外邊距合併指的是，在普通文件流中，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。
合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
怎樣避免這樣的效果的發生呢。這將引出bfc的第乙個特性：
給div加上overflow：hidden屬性。即觸發bfc的第四個條件：
div
由此可見。觸發了bfc的元素，不和它的子元素發生外邊距摺疊。
在使用浮動的時候，常常會出現這樣的情況：
class="outer">
class="inner">div>
div>
css：
body
.outer
.inner
能夠看到outer的高度是0，並沒有算上內部浮動的inner，這樣的現象稱之為高度塌陷。
bfc將能解決問題，這就是bfc的第二個特性：
相同的給outer加上overflow：
.outer
class="left">div>
class="right">div>
css:
body
.left
.right
能夠看到，浮動的元素覆蓋在了其相鄰元素上。解決問題將引出bfc的第三個特性：
對right加入overflow屬性：
.right
這個感覺跟給right也加了float: left一樣，由於使用float: left相同會觸發bfc（第乙個條件）
當然這個情況僅僅出如今兩個元素寬度之和不大於父元素寬度的時候。不然right會換行。
總結一下，觸發了bfc的元素將具有下面特點：
阻止和子元素外邊距摺疊
包括浮動元素
阻止元素被浮動元素覆蓋
最後須要說明的是ie7下面瀏覽器中並不支援bfc，而是有其特有的haslayout，它和bfc非常類似，但產生了非常多問題。
觸發haslayout的方式之中的乙個是使用zoom: 1。所以使用的時候最好加上zoom: 1，保證相容性。
css BFC粗淺應用
在網上搜css bfc，很多專業的帖子，本文只說下最簡單的應用 在布局的時候，有時候absolute是很方便的，比如要製造某元素離底部10px的效果，用absolute定位可能是最簡單的方式。而absolute布局，就涉及到bfc的概念 首先為乙個元素設定樣式 position absolute b...
css BFC與IFC的理解
bfc block formatting context 即 塊級格式化上下文 ifc inline formatting context 即 行內格式化上下文 常規流 也稱標準流 普通流 是乙個文件在被顯示時最常見的布局形態。乙個框在常規流中必須屬於乙個格式化上下文，你可以把bfc想象成乙個大箱子...
學習筆記 雜湊學習筆記
hash基本原理 hash就是乙個像函式一樣的東西，你放進去乙個值，它給你輸出來乙個值。輸出的值就是hash值。一般hash值會比原來的值更好儲存 更小 或比較。那字串hash就非常好理解了。就是把字串轉換成乙個整數的函式。而且要盡量做到使字串對應唯一的hash值。它的主要思路是選取恰當的進製，可以...