父元素设置了margin-top和margin-left，
接下来
子元素设置margin-left:50px;
发现并没有什么问题，
然后接下来，再给子元素设置margin-top:50px;
发现不起作用，即使你把top设置为150也解决不了问题，只有你的top值大于父元素设置的top值才可以移动
而且会发现子元素连带着父元素一起移动，
是因为父子嵌套的元素，其垂直方向上的margin是连带在一起的，而且取最大值，
就好像父元素的上边线子元素检查不到了。
解决方法：
1，给父元素上面加一个border
当然这种方法不行，肯定不行，绝对不行
2，BFC（block format context）块级格式化上下文
CSS是将html每个元素都当成一个盒子，然后根据一定的原则，再根据你写的代码来渲染一个一个的盒子。
BFC就可以改变某些或者指定的一个盒子中的原则，再来进行渲染
比如一个代码中宽高100px ，渲染出来就是宽高100px
但是你使用了BFC之后，即使代码是宽高100px，渲染出来就会变成宽高50px，（举个例子，意思是这样的）
使用了BFC之后，特定的盒子就会遵循另一套语法规则。
如何触发一个盒子的bfc：
1，position:absolute
2, display:inline-block
3, float:left/right
4, overflow:hidden（溢出部分隐藏）
上面四种方法都是使父级元素变为bfc元素，然后再解决
例子：
解决了。
至于overflow:hidden的作用就是溢出部分隐藏，下面看一下：
改动之后：
下一个bug
然后在span2加上margin-left:100px，发现区域边长了
说明两者之间的区域是靠两个人共同维护的
这是水平的，下面是垂直的：
然后div2中加上margin-top：100px；
发现不起作用
说明垂直方向上的margin是合并的，
然后变成200px的距离，取最大值
怎么解决：
将一个元素或者两个元素放到bfc环境中
现在就可以了，当然这个问题改变了Html页面结构，这而且这个bug可以通过计算解决，所以不用bfc解决