对于margin塌陷和margin拖拽解决办法

    初次涉入前端这个领域，在用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是比较好的一种方法。

本文章只是本人在实践过程中遇到的问题和一些自己的一些理解。请自己酌情参考。