关于子元素设置margin-top 父级元素掉下来的bug的解决方法
最好的方式就是避免给子元素设置margin-top，可以给子元素设置padding或者给父元素设置padding。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.parent{width: 800px;height: 300px;background: red;}
.child{width: 200px;height: 100px;background: pink;margin-top: 20px;}
</style>
</head>
<body>
<div class="parent">
<div class="child">child</div>
</div>
</body>
</html>
上面的代码就会出现父亲掉下来的bug，可以看到并没有达到想要的效果
如果必须设置margin的话，有以下方法解决父元素掉下来的bug
-
给父元素设置
.parent{padding-top: 0.1px;} -
给父元素设置
.parent{border: 1px solid transparent;} -
给父元素设置
.parent{overflow: hidden;} -
给父元素设置
.parent{display: inline-block;} -
给父元素设置
.parent{float: left;} -
给父元素设置
.parent{position: absolute;}
上面的任意一种方法，都可以解决这个bug，现在就可以达到我们需要的效果了，可以根据自己的具体需求