小问题总是容易让人们忽视，而在面试的时候一脸蒙，因为简单的问题造成尴尬局面，那么就日积月累，时常记忆，烂熟于心！
margin塌陷
在父子元素中，分别设置margin 比如父元素设置100px 子元素设置50px
惊奇的发现，结果出乎我们意料！水平方向的距离确实没问题，但是垂直方向上，明明子元素设置了margin-top距离顶部50px，按道理它会距离父元素顶部50px才对。
这种现象被称之为margin塌陷。但很多人可能都不太理解，为什么叫它塌陷？其实你可以这样理解，如上述例子，原本子元素要距离父元素顶部50px，现在没有了，也就是父元素的顶棚对子元素来说没有作用，相当于没有，相当于塌陷下来了。所以叫margin塌陷。
一句话总结：父子嵌套的元素垂直方向的margin取最大值。
但是有的时候我们不希望有这样的问题，那我们如何解决margin塌陷的问题呢？
答案是，我们可以通过触发BFC来解决！什么是BFC呢？
BFC
什么是BFC和作用
Block Formatting Context，中文叫块级格式化上下文。
CSS将HTML的每一个元素都当成一个盒子，而且它进一步的认为每一个盒子里面都有一套正常的语法规则或者叫渲染规则，它能根据这个规则将写的HTML元素绘制出来，但是我们可以通过一些特定的手段触发BFC，让其所符合的语法规则和原来的语法规则有点不一样。
也就是触发BFC之后，特定的盒子会遵循另一套语法规则。
BFC听起来挺神奇，能改变一个盒子的语法规则，其实也没改变多少。可能千分之一都不到。但是就是这一点点它把解决了margin塌陷和margin合并的问题
如何触发BFC
小结触发BFC方法：
float属性为left/right
overflow为hidden/scroll/auto
position为absolute/fixed
display为inline-block/table-cell/table-caption
有这几多方式触发BFC，那用哪种方式好一些？看具体情况，个人认为一个原则：针对需求，看哪个触发方式没有影响就用那个
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。