margin塌陷

1. 什么是margin塌陷

有的人会解释为垂直方向上两个兄弟元素的margin非加和，而是取较大值，这其实是【margin合并】；
有的人会解释为子元素浮动造成父元素高度为0，这其实是【高度塌陷】；
我不知道怎么定义【margin塌陷】，只能说本文讨论的是：设置margin后不符合常规预期的一个场景。

2. 问题场景

<style type="text/css">
	.parent{
		width: 100px;
		height: 100px;
		background-color: #CCC;
	}
	.son{
		width: 50px;
		height: 50px;
		background: #666;
		margin-top: 25px;
	}
</style>
<div class="parent">
	<div class="son">
	</div>
</div>

两个很普通的元素，父子结构，我们给子元素设置了margin-top: 25px;。
预期效果：我以为是子元素会在父元素内下移25px；
实际效果：子元素带着父元素一起下移了25px，如下图：

注：水平方向不存在该问题。

3. 怎么破

• 不要在子元素上使用margin处理父子边距，而是在父元素上使用padding去处理（推荐）；
• 给父元素设置一个边框即可；

  .parent{
  	border: 1px solid #FFF;
  }
  

• 开启父元素的BFC(Block Formatting Content)属性即可；

  .parent{
  	/*任一均可*/
  	float: left;
  	position: absolute;
  	display: inline-block;
  	overflow: hidden;
  }
  

  开启BFC属性的方法：
  • float: left/right;
  • position: absolute/fixed;
  • display: inline-blocks/table-cells/table-captions;
  • overflow: hidden/auto/scroll;