maring塌陷

父元素设置了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解决