CSS块元素嵌套塌陷问题（div嵌套margin无法改变内div外边距）

原因：

嵌套两个块元素时，内元素设定margin后不起作用，

如：

代码：

 

效果如图：

 按理代码来说蓝色块应该往下50像素，但实际并没有效果

原因是：

嵌套使得产生了塌陷效果，外边距会按照margin值大的那个整体一起下降。

上图就是父子块一起下降了100像素，如果box2的margin值大于box1的那就会执行box2的，读者

可自行试一试。

解决方法

有三种方法：

1、给父元素加上透明边框

2、给父元素定义上内边框

3、给父元素添加overflow：hidden

一般我们都用第三种，快速且简单。