一、margin合并
css经典bug 两个块级元素 分别设置 margin-bottom 和 margin-top 并不能达到预期效果
<style>
.up{
width: 200px;
height: 50px;
background: blue;
margin-bottom: 50px;
}
.down{
width: 200px;
height: 50px;
background: pink;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="up"></div>
<div class="down"></div>
</body>
上面代码的最终效果 中间的距离 并不是margin-top + margin-bottom 而是 两者 中取大的那个 的值 就像 合并到了一
解决方法
给 up 和 down 都加上父级 并给父级设置 overflow：hidden
margin塌陷
wrapper 包裹 box wrapper的margin-top和box的margin-top 取最大值 且 box 紧紧贴纸 wrapper的人上边 并不是 box相对wrapper 取 margin-top
<style>
.wrapper{
width: 200px;
height: 200px;
background: rgb(228, 143, 143);
}
.box{
width: 50px;
height: 50px;
margin-top: 20px;
border: 1px solid blue;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="box"></div>
</div>
</body>
解决方法
1.利用給父级添加 border 来触发 bfc效果
类似子集看不见父级的边界 添加一个 border 来解决 但改变 父级的样式 (舍去)
2.利用給父级添加 overflow 属性触发 bfc
bfc
block format context 块级格式化上下文
触发bfc 的方法
postion: absolute;
display: inline-block;
overflow: hidden;
float:left/right