????初次涉入前端這個(gè)領(lǐng)域，在用HTML和CSS寫頁(yè)面的時(shí)候遇到了一個(gè)問(wèn)題，當(dāng)我在想給子級(jí)設(shè)置margin top這句時(shí)，父級(jí)也跟著一起下來(lái)了，出現(xiàn)了拖拽現(xiàn)象，一開始這個(gè)問(wèn)題一直困擾著我，通過(guò)查閱資料和請(qǐng)教大神后終于得到了解決。

? ? 我們想的是將紅色方塊往下移動(dòng)而藍(lán)色的不動(dòng)，如下圖所示

代碼實(shí)現(xiàn)如下圖所示

但是結(jié)果卻是藍(lán)色方塊和紅色方塊一起移動(dòng)了（或者都不動(dòng)）：當(dāng)子元素加margin-top的時(shí)候，如果子元素的margin小于父元素的margin，塌陷效果（子元素沒(méi)有移動(dòng)的效果）

如果子元素的margin大于父元素的margin，拖拽效果（父級(jí)也一起移動(dòng)了）

如下圖

解決的辦法就是觸發(fā)BFC效果（overflow：hidden），將上面注釋掉的代碼恢復(fù)出來(lái)，得到的結(jié)果，如下圖

產(chǎn)生原因：產(chǎn)生上面問(wèn)題的原因是，子級(jí)以為上面沒(méi)有頂

那什么是bfc呢？查閱了一些資料，簡(jiǎn)單有了些了解：

????BFC（bfc block format content）：塊級(jí)格式化上下文

? ? 這是一種效果，這種效果可以觸發(fā)，下面四種語(yǔ)句都可以觸發(fā)BFC

? ? 1、position:absolute

? ? 2、display:inline-block

? ? 3、float：left

? ? 4、overflow：hidden

BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素。反之也如此

因?yàn)锽FC內(nèi)部的元素和外部的元素絕對(duì)不會(huì)互相影響，因此， 當(dāng)BFC外部存在浮動(dòng)時(shí)，它不應(yīng)該影響B(tài)FC內(nèi)部Box的布局，BFC會(huì)通過(guò)變窄，而不與浮動(dòng)有重疊。同樣的，當(dāng)BFC內(nèi)部有浮動(dòng)時(shí)，為了不影響外部元素的布局，BFC計(jì)算高度時(shí)會(huì)包括浮動(dòng)的高度。避免margin重疊也是這樣的一個(gè)道理。

另一種理解方法：

對(duì)CSS有了解的肯定都知道盒式模型這個(gè)概念，對(duì)一個(gè)元素設(shè)置CSS，首先需要知道這個(gè)元素是block還是inline類型。而BFC就是用來(lái)格式化塊級(jí)盒子，同樣管理inline類型的盒子還有IFC，以及其他的FC。那首先我們就來(lái)看一下FC的概念。

Formatting Context：指頁(yè)面中的一個(gè)渲染區(qū)域，并且擁有一套渲染規(guī)則，他決定了其子元素如何定位，以及與其他元素的相互關(guān)系和作用。

　 BFC：塊級(jí)格式化上下文，它是指一個(gè)獨(dú)立的塊級(jí)渲染區(qū)域，只有Block-level BOX參與，該區(qū)域擁有一套渲染規(guī)則來(lái)約束塊級(jí)盒子的布局，且與區(qū)域外部無(wú)關(guān)。

? ? 當(dāng)然除了觸發(fā)BFC效果，也可以用父級(jí)加邊框（border）和絕對(duì)定位（position：absoluted），但是有時(shí)候用這兩種方法會(huì)遇到一些問(wèn)題，比如有時(shí)候父級(jí)并不要邊框，而加絕對(duì)定位后該板塊會(huì)完全脫離文本流，寫下一塊后，下一塊會(huì)跑到該板塊下面，會(huì)被該板塊遮擋，所以用觸發(fā)BFC是比較好的一種方法。

本文章只是本人在實(shí)踐過(guò)程中遇到的問(wèn)題和一些自己的一些理解。請(qǐng)自己酌情參考。