如果一个元素(x)想与相邻的其他元素(y)有间距，加margin值时，y元素要有高度
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* { padding:0; margin:0; }
.clrfix {}
.clrfix:after { clear:both; height:0; display:block; content:""; visibility:hidden; }
.container { width:980px; margin:0 auto; border: 1px solid black;}
.top { background-color:red; }
.left { width:600px; background-color:#aaa; float:left; display:inline; }
.right { width:300px; background-color:#d1d1d1; float:right; display:inline; }
.bottom { height:20px; background-color:blue; }
.margin_t10 { margin-top:10px; }
</style>
</head>
<body>
<div class="container">
<div class="top clrfix">
<div class="left">我是左侧边栏</div>
<div class="right">我是右侧边栏</div>
</div>
<div class="bottom margin_t10">我跟上面有10px的间距哈</div>
</div>
</body>
</html>如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
解决办法1、给最外层的容器div.container 加一个overflow:hidden;
解决办法2、给另外一个需要有间距的元素 div.top一个触发高度的值，比如说border：1px solid transparent; 或者overflow:hidden; 但是还要根据具体情况。
总之是触发元素的hasLayout为true。当然兼容性还要测试一下哈