为什么给子元素设置margin-top值时或者给父元素设置margin-top值时父子盒子会一起移动？今天在写一个页面布局题时遇到了这个问题，查找了一些资料原来是大名鼎鼎的盒子边距塌陷问题。
视频样式，注意我操作的是子盒子的margin-top

盒子塌陷

demo:

nihao

css样式：

/*TODO：请补充代码
*/
*{margin: 0;padding: 0;
}
.main{height:440px ;background-color: #a6b1e1; /* overflow:hidden *//* border: 1px solid rgb(255, 255, 255); *//* padding-top: 1px;  */
}.body_{height: 427px;width: 1024px;margin-top: 13px; background-color: pink;
}

demo很简单。就是一个父盒子一个子盒子。当我想要子盒子距离父盒子顶端13px时发现无法设置成功，并且父盒子距离最顶端有13px距离，并且父盒子距离顶端的距离随着子元素设置的margin-top值的增大而增大。

解决办法

如css样式中的main类中注释区域所示，任选一行使用即可解决问题。没啦~

原理

如果您老不急的话还可以来看看原理。使用overflow:hidden可以触发BFC规则，什么是BFC呢，就是 W3C CSS2.1 规范中的一个概念。全称Block Formatting Contexts (块级格式化上下文)。当它被触发时形成一个独立的区域，内部元素垂直排列。详细可见BFC是什么
第二行注释和第三行注释其实是一个道理就是为了把父子盒子分隔开，使得他们不占用同一块上边距区域。