如果一个元素(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>

提问 2013年 11月18日 @ Taric 上等兵 (184 威望)

分享到：

1个回答

解决办法1、给最外层的容器div.container 加一个overflow:hidden;
解决办法2、给另外一个需要有间距的元素 div.top一个触发高度的值，比如说border：1px solid transparent; 或者overflow:hidden; 但是还要根据具体情况。
总之是触发元素的hasLayout为true。当然兼容性还要测试一下哈