<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
width: 0;
}
.demo1{
/* margin-left: 100px;
margin-top: 100px; */
height: 100px;
width: 100px;
background-color: black;
}
.demo2{
height: 50px;
width: 50px;
/* margin-left: 50px;
margin-top: 50px; */
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2"></div>
</div>
</body>
</html>
现在给得demo2的父级demo1设置margin-left: 100px;margin-top: 100px;demo1就会带着他的儿子demo2移动成下面这样：
下面再给demo2设置margin-left: 50px;demo1就会相对他的父亲向右移动成下面这样：
当你在设置demo2的margin-top: 50px;时候，你会惊奇的发现没有什么变化，就算我改成margin-top: 100px;他还是没有变化！
你只有加到比他父亲demo1的margin还大的时候，他才会带着他的父亲一起向下移动。比如demo2的margin-top: 150px;
这样的现象叫作margin塌陷：
垂直方向的margin，父子元素是结合到一起的，会取最大的margin移动。
怎样解决呢？
首先很low的方法：
给demo2的父亲demo1加个边线，border-top: 1px solid red;
这种手法肯定不行，不专业吧，虽然是1培训你看不出来，就是改成0.5px也不行。
专业的方法：——bfc
专业名词：block format content（块级格式化上下文）
CSS会把HTML的每一个元素都当成一个盒子，而且他进一步认为每一个盒子里面都有一套渲染规则，就是你写完这个代码，他会按照你写得代码把这个东西绘制出来，bfc就是通过一些方法让一个盒子或几个盒子里面的渲染规则发生改变（他只会改变一丁点，比如有1000条规则，bfc只会改变0.1条都不到，就是改变这一丁点，bfc就把margin塌陷给解决了）。
如何触发一个盒子的bfc：
一：给盒子设置position: absolute;设置定位之后这个盒子就自然成了bfc元素了。
二：display: inline-block;
三：float: left/right;浮动
四：overflow: hidden;溢出部分隐藏
咱们先从第四个方法讲起：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
*{
margin: 0;
width: 0;
}
.demo1{
margin-left: 100px;
margin-top: 100px;
height: 100px;
width: 100px;
background-color: black;
/* overflow: hidden; */
}
.demo2{
height: 50px;
width: 50px;
margin-left: 75px;
/* margin-top: 150px; */
background-color: green;
}
</style>
<title></title>
</head>
<body>
<div class="demo1">
<div class="demo2"></div>
</div>
</body>
</html>
现在我把demo2的margin-top: 150px;注释掉，再把demo2的margin-left改成75像素，demo2就会出来，如下图
我在给demo1加一个overflow: hidden;demo2在demo1外面的部分就会隐藏，如下：
overflow: hidden;叫做溢出盒子的部分隐藏。
现在我把demo2的margin-left改成50px;再加上margin-top: 150px;
你会发现demo2全部出了demo1，所以demo2就会被全部隐藏。现在我再把demo2的margin-top设置成50px;如下：
说明margin塌陷的问题已经解决了吧。
你把demo1的overflow: hidden;注释掉，改成display: inline-block;也好使，改成position: absolute;也好使，都能触发bfc，解决margin塌陷问题。
但是这个bug没有完美的办法解决，咱只能用一些方法来弥补，你会发现这些方法都能解决margin塌陷问题，到那时解决问题的同时他们也带来的新的问题，比如overflow: hidden;，我里面的内容就是想溢出盒子的，你加overflow: hidden;还合适吗？不合适！还比如：我这个盒子就像好好的摆在那里，后面的元素罗列在他的下面，到那时这个时候你为了解决margin塌陷你就加了一个position: absolute;，就不合适。有时候咱不想让他变成inline-block，咱想让他独占一行，也不行。这时候那个方法对你的需求没影响，你就选择使用那个方法。