margin塌陷
body：
<body>
<div class="fu">
<div class="zi">
</div>
</div>
</body>
* {
margin: 0px;
padding: 0px;
}
.fu{
background-color: cyan;
height: 200px;
width: 200px;
}
.zi{
background-color: #ff0000;
height: 50px;
width: 50px;
}
1.如果给子盒子加margin-top：
.zi{
background-color: #ff0000;
height: 50px;
width: 50px;
margin-top: 70px;
}
带着父盒子一起下移，这就是边界塌陷吧？正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.
但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.
解决办法：
1.给父盒子加上border：不建议使用
.fu{
background-color: cyan;
height: 200px;
width: 200px;
border: 1px solid black;
}
2.触发bfc，"块级格式化上下文"
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-
计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC?
float:left/right 浮动元素
position为absolute或fixed 绝对定位元素
display为inline-block, table-cell, table-caption, flex, inline-flex 非块级盒子的块级容器
overflow:hidden overflow的值不是visible
副作用:
1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧，并被其他元素环绕
4、overflow: hidden 将裁切溢出元素
