1 margin塌陷问题
1.1 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin塌陷</title><style>.parent{width: 200px;height: 200px;background-color: red;margin-left: 100px;margin-top: 100px;}.child{width: 100px;height: 100px;background-color: blue;margin-left: 50px;margin-top: 50px; /*子元素的margin-top无效？*/}</style>
</head>
<body><div class="parent"><div class="child"></div></div>
</body>
</html>
显示如下图所示，从图中可以看到子元素的margin-top没有显示出来，希望的是距离父盒子的顶部50px，但是现在和顶部重叠了，这就发生了margin塌陷。
造成的原因是：父子处于同一个BFC中，在同一个BFC中会出现垂直方向的margin重叠，margin重叠取最大值，即父元素的margin-top:100px。
1.2 margin塌陷的解决
可以触发BFC，改变父级的渲染规则。
.parent{width: 200px;height: 200px;background-color: red;margin-left: 100px;margin-top: 100px;/*触发BFC*//* position: absolute; *//* position: fixed; */overflow: hidden; /*推荐使用这种*//* overflow: auto; *//* overflow: scroll; 会影响样式 *//* float: left; 会影响布局*//* float: right; 会影响布局*//* display: table-cell; */}
2 margin合并问题
2.1 示例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>margin合并</title><style>.one{background-color: red;height: 100px;width: 100px;margin-bottom: 100px;}.two{background-color: blue;height: 100px;width: 100px;margin-top: 50px;}</style>
</head>
<body><div class="one"></div><div class="two"></div>
</body>
</html>
如下图所示，两个兄弟块之间的margin合并了，显示的是较大值。
2.2 解决方法
- 为一个元素添加BFC，这种方法修改了HTML的结构，不好
<div class="bfc"><div class="one"></div></div><div class="two"></div>
- 计算出合适的值，设置其中下面元素的margin-top或者上面元素的margin-bottom即可。
