add files

02-CSS/07-浮动.md

@@ -804,9 +804,11 @@ _zoom:1;
 > 我们来讲一下浮动中和margin相关的知识。
 
 
-### margin塌陷
+### margin塌陷/margin重叠
 
-**标准文档流中，竖直方向的margin不叠加，以较大的为准**(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
+
+
+**标准文档流中，竖直方向的margin不叠加，取**较大的值**作为margin(水平方向的margin是可以叠加的，即水平方向没有塌陷现象)。如下图所示：
 
 ![](http://img.smyhvae.com/20170805_0904.png)
 
@@ -816,6 +818,37 @@ _zoom:1;
 
 
 
+
+### 善于使用父亲的padding，而不是儿子的margin
+
+我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）
+
+```
+	<div>
+		<p></p>
+	</div>
+```
+
+上面的结构中，我们尝试通过给儿子`p`一个`margin-top:50px;`的属性，让其与父亲保持50px的上边距。结果却看到了下面的奇怪的现象：
+
+![](http://img.smyhvae.com/20170806_1537.png)
+
+
+此时我们给父亲div加一个border属性，就正常了：
+
+![](http://img.smyhvae.com/20170806_1544.png)
+
+
+
+如果父亲没有border，那么儿子的margin实际上踹的是“流”，踹的是这“行”。所以，父亲整体也掉下来了。
+
+**margin这个属性，本质上描述的是兄弟和兄弟之间的距离； 最好不要用这个marign表达父子之间的距离。**
+
+所以，如果要表达父子之间的距离，我们一定要善于使用父亲的padding，而不是儿子的margin。
+
+
+
+
 ### 盒子居中`margin:0 auto;`
 
 margin的值可以为auto，表示自动。当left、right两个方向都是auto的时候，盒子居中了：
@@ -853,6 +886,8 @@ text-align:left;     //没啥用，因为默认居左
 text-align:right;    //文本居右
 ```
 
+
+
 ### 善于使用父亲的padding，而不是儿子的margin
 
 我们来看一个奇怪的现象。现在有下面这样一个结构：（div中放一个p）