????初次涉入前端這個領域，在用HTML和CSS寫頁面的時候遇到了一個問題，當我在想給子級設置margin top這句時，父級也跟著一起下來了，出現了拖拽現象，一開始這個問題一直困擾著我，通過查閱資料和請教大神后終于得到了解決。
? ? 我們想的是將紅色方塊往下移動而藍色的不動，如下圖所示
代碼實現如下圖所示
但是結果卻是藍色方塊和紅色方塊一起移動了（或者都不動）：當子元素加margin-top的時候，如果子元素的margin小于父元素的margin，塌陷效果（子元素沒有移動的效果）
如果子元素的margin大于父元素的margin，拖拽效果（父級也一起移動了）
如下圖
解決的辦法就是觸發BFC效果（overflow：hidden），將上面注釋掉的代碼恢復出來，得到的結果，如下圖
產生原因：產生上面問題的原因是，子級以為上面沒有頂
那什么是bfc呢？查閱了一些資料，簡單有了些了解：
????BFC（bfc block format content）：塊級格式化上下文
? ? 這是一種效果，這種效果可以觸發，下面四種語句都可以觸發BFC
? ? 1、position:absolute
? ? 2、display:inline-block
? ? 3、float：left
? ? 4、overflow：hidden
BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
因為BFC內部的元素和外部的元素絕對不會互相影響，因此， 當BFC外部存在浮動時，它不應該影響BFC內部Box的布局，BFC會通過變窄，而不與浮動有重疊。同樣的，當BFC內部有浮動時，為了不影響外部元素的布局，BFC計算高度時會包括浮動的高度。避免margin重疊也是這樣的一個道理。
另一種理解方法：
對CSS有了解的肯定都知道盒式模型這個概念，對一個元素設置CSS，首先需要知道這個元素是block還是inline類型。而BFC就是用來格式化塊級盒子，同樣管理inline類型的盒子還有IFC，以及其他的FC。那首先我們就來看一下FC的概念。
Formatting Context：指頁面中的一個渲染區域，并且擁有一套渲染規則，他決定了其子元素如何定位，以及與其他元素的相互關系和作用。
BFC：塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level BOX參與，該區域擁有一套渲染規則來約束塊級盒子的布局，且與區域外部無關。
? ? 當然除了觸發BFC效果，也可以用父級加邊框（border）和絕對定位（position：absoluted），但是有時候用這兩種方法會遇到一些問題，比如有時候父級并不要邊框，而加絕對定位后該板塊會完全脫離文本流，寫下一塊后，下一塊會跑到該板塊下面，會被該板塊遮擋，所以用觸發BFC是比較好的一種方法。
本文章只是本人在實踐過程中遇到的問題和一些自己的一些理解。請自己酌情參考。
