小问题总是容易让人们漠视，而在面试的时候一脸蒙，因为简略的问题造成难堪场面，那么就与日俱增，时常记忆，烂熟于心！
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，那用哪种形式好一些？看具体情况，集体认为一个准则：针对需要，看哪个触发形式没有影响就用那个