目錄：
什麼是bfc？及其作用！
如何產生bfc？
bfc的應用
邊距重疊
不與float box重疊
高度塌陷
總結bfc 即（block format context）快級格式化範圍，是 css2.1 中用於規定塊級盒子的渲染布局方式，他在計算盒子高度，margin值等地方有區別於其他環境。
bfc 是一種概念，是對前端布局技術的一種理論上的總結，掌握它可以讓我們在使用css +div進行布局時，知道一些特殊操作以及規避問題的原理。
形象的去理解我們可以將bfc看做成乙個封閉的盒子，盒子以及盒子內的內容不受盒子外的其它盒子所影響，反之亦然。
bfc的主要作用有以下幾點：
為下情況都會讓元素本身產生bfc環境：
· 根元素 (乙個頁面的html標籤應該是唯一的)
· display: inline-block | table-cell | table-caption | flex
· position: absolute | fixed
· overflow: hidden | auto | scroll
· float: left | right
所謂邊距重疊就是當兩個元素垂直邊距相互接觸時，它們將合併形成乙個邊距，這個合併後的邊距值就是這兩個邊距值中最大的哪乙個。
產生邊距重疊的情形無外乎以下兩個方面：
解決邊距重疊的方法有很多，但是我認為這些方法最終還是歸於兩種：
防止邊距接觸
既然邊距重疊是發生在邊距相互接觸的情形下，那麼我們就可以針對問題的本質，防止兩個元素的邊距發生接觸，比較常見的方法有：
· 新增1px高度的間隔元素
這種新增冗餘標籤的方式來解決垂直同級排列的邊距重疊，最好還是不要採用。
· border-top:1px solid transparent
新增1px透明的上邊框，來解決父子元素邊距重疊。
· padding-top:1px
新增1px間距，來解決父子元素邊距重疊。
overflow
display
position
float
ps：個人認為垂直同級排列的元素邊距實際上不需要去防止邊距重疊，而且防止的話也很簡單，給乙個心目中滿意的最大值即可。我們知道浮動元素會脫離文件流，然後浮蓋在文件流元素上，可以見示例：
解決這個問題的方法也很簡單，那就是為非浮動元素建立bfc環境，根據bfc的不不與float box重疊的規則，我們可以得知下面demo中的情景。
普通的文件流元素是無法包含浮動後的元素。
示例：
示例：
解決高度塌陷的前提就是能識別幷包含到浮動元素。而bfc就有這個特性，所以bfc也可以計算浮動元素的高度。
示例：
overflow:hidden將元素轉換為bfc，固然可以解決高度塌陷的問題，但是大範圍的應用在布局上是肯定是行不通的，畢竟overflow會造成溢位隱藏的問題，特別是與js互動的效果時。
那有沒有乙個更好的高度檢測方法呢？
答案是有的，就是我們經常用到的clearfix。
.clearfix:after
.clearfix
看了那麼多關於bfc知識的介紹，我個人的感覺是並沒有什麼卵用啊...知道它，不知道它，我平日的工作該怎麼做，還是這麼做，**該怎麼擼還是這樣擼，要說收穫的話，就是對css 盒模型有了更深入一點的了解，以及利用bfc在兩欄自適應布局上的新發現吧。
好了，洗洗睡去了，明天要上班了
kmp從入門到放棄
標籤 kmp 擴充套件kmp 給你兩個字串，你需要回答，b串是否是a串的子串 a串是否包含b串 a aaaaaaaaaaaaaaaaaaaaaaaaaab b aaaaaaaab 最壞狀態 o mn 一般做法 for 列舉b在a串中的起始位置 for 向後比較ab是否相等 o n m 傳說中的kmp...
beego 從入門到放棄
beego 的專案基本都是通過 bee命令來建立的，所以在建立專案之前確保你已經安裝了 bee 工具和 beego。如果你還沒有安裝，那麼請查閱 beego 的安裝 和 bee 工具的安裝 現在一切就緒我們就可以開始建立專案了，開啟終端，進入 gopath src 所在的目錄 建立乙個專案名為201...
Flutter從入門到放棄
本篇主要記錄下flutter的學習路線。一 認識flutter 可以檢視這些文章 二 dart語言 1 認識dart語言 2 學習 從2018.02開始出現dart2，屬於強型別語言。介紹位址參考 三 開始flutter 網上也有很多部落格介紹了flutter怎麼安裝，但大多介紹不全，第一次安裝難免...