margin-top塌陷问题
Posted pengwa1226
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了margin-top塌陷问题相关的知识，希望对你有一定的参考价值。
margin-top塌陷是怎么回事呢？
两个盒子嵌套的时候，内部盒子的margin-top会加到外面的盒子上面，导致盒子的margin-top塌陷。这是一个系统级别的bug.
解决的办法有：
1.给盒子加上一个边框，缺点是盒子会有一个边框影响美观
2.外部盒子设置overflow:hidden；缺点是当盒子里面的元素溢出的时候，会裁剪掉盒子里面的内容。
3.使用伪元素方法（最优的方法）：这个方法的原理至今没弄懂，为啥加上一个伪元素和一个display：table就可以解决了呢？？？
.clearfix:before{
content:"";
display:table;
}
代码如下：
<!DOCTYPE html>
<html>
<head>
<title>margin特性</title>
<style type="text/css">
.con{
width: 300px;
height: 200px;
background-color: gold;
/*设置盒子居中的方法：padding或者margin
width: 100px;
height: 100px;
padding: 50px 100px;*/
/*利用margin来居中会出现margin-top塌陷的问题；解决margin-top塌陷的方法一：加外边框;但是会加上一个边框
width: 298px;
height: 198px;
background-color: gold;
border:1px solid red;*/
/*解决margin-top塌陷第二种方法
overflow: hidden;*/
}
.box{
width: 100px;
height: 100px;
background-color: green;
margin:50px 100px;
}
.clearfix:before{
content: "";
display: table;
}
</style>
</head>
<body>
<div class="con clearfix">
<div class="box"></div>
</div>
</body>
</html>
以上是关于margin-top塌陷问题的主要内容，如果未能解决你的问题，请参考以下文章