您的位置：首页 > 其它

关于margin重叠现象的解决方案

2017-06-12 12:09 246 查看 
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box1 {
width: 100px;
height: 100px;
background-color: #8a8a8a;
margin-bottom: 30px;
}
.box2 {
width: 100px;
height: 100px;
background-color: #f88f3a;
margin-bottom: 30px;
margin-top: 30px;
}
.box3 {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>


对于上面的代码，就会出现margin重叠现象，box1和box2之间的margin并不是60而是30，box2和box3之间的margin是50。为什么会出现这种情况呢？这就涉及到BFC的问题，在这我们不谈论BFC的问题，可以去自行百度，我们主要讲讲解决方案。

方案一：

给每个box添加一个div，并添加一个类,并添加overflow:hidden;


.wrap {
overflow: hidden;
}


方案二：

给每个box添加一个div，并添加一个类，并添加border: 1px solid transparent;


.wrap {
overflow: hidden;
}


方案三：

给每个box添加一个div，并添加一个类，并添加padding: 1px;


.wrap {
overflow: hidden;
}


方案四：

给每个box设置float属性，并添加clear: both;


.box1,.box2,.box3  {
float: left;
clear: both;
}


暂时能想到的就这么多，说的有不对的地方，欢迎各位前来讨论。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航