day07 关于margin的两个经典bug

margin塌陷

1、这个问题是一个经典的浏览器内核问题。具体表现是当两个元素嵌套到一起时，外层盒模型的margin-top取两个元素中margin-top较大的值。
2、在文档流中，父元素的高度默认是被子元素撑开的,子元素有多高，父元素就有多高。当子元素设置浮动之后，子元素会完全脱离文档流，此时将会导致子元素无法撑开父元素的高度，导致父元素高度塌陷

<div>
 	<div class="wrapper">
 		<div class="content"></div>
 	</div>
 </div>

.wrapper{
	margin-left:50px;
	margin-top: 50px;
	width:100px;
	height:100px;
	background-color: red;
}
.content{
	margin-left:50px;
	margin-top:80px;
	width:50px;
	height:50px;
	background-color: black;
}

在正常的情况下内层元素是相对于外层元素进行移动，但是这时内层元素却相对于整个文档进行移动，好像外层元素没有“棚顶”一样，此时margin-top为80px，因此叫margin塌陷问题。
由于父元素高度塌陷，子元素想要通过margin-top向下移动，可是失败了，如果margin-top超过一定限度就会带着父级一起向下移动。

margin塌陷问题解决方法：

1、给外层元素一个“棚顶”:border。
这种方法虽然能够解决问题，但是在日常开发中我们不使用它，因为他在外观上对元素进行了改变
2、在父级里加bfc语法，触发bfc语法，改变渲染规则。
bfc: block format context 块级格式化上下文。每一个元素都是一个盒子，每一个盒子都符合一定的渲染规则。我们可以通过触发bfc方式，让特定盒子里的渲染规则发生变化。

触发bfc:

position:absolute;
display:inline-block;
float:left/right;
overflow:hidden;

如图未加bfc,黑色块并不会相对于红色块顶端向下移动。

如图在父级加入 position:absolute; display:inline-block; float:left/right;

margin合并

 <div class="demo1"></div>
 <div class="demo2"></div>
.demo1{
    	height:100px;
    	background-color: pink;
    	margin-bottom:10px;
}
    .demo2{
    	height:100px;
    	background-color: brown;
    	margin-top:10px;
 }

这种情况下demo1与demo2的上下margin会合并。
可在外面包裹一层父级，添加bfc语法，可避免这种情况。但在开发过程中，不能随意修改增添html结构，常用数学方法弥补合并问题，直接相加。