测试代码如下:
<!DOCTYPE html>
<html><head>
<title></title>
<style type="text/css">
.container{width: 50%;margin: 0px auto;background-color: #919191;overflow:hidden;}
/*.container{width: 50%;margin: 0px auto;background-color: #919191;position: absolute;}*/
/*.container{width: 50%;margin: 0px auto;background-color: #919191;float: left;}*/
.sub-container{width: 100px;background-color: #ddd;margin: 0px auto;margin-top: 30px;}</style>
</head>
<body>
<div class="container">
<div class="sub-container">
sub-container
</div>
<div class="sub-container">
sub-container
sdkfj<br><br>
</div>
</div>
</body>
</html>
说明:有三种方式解决子div设置margin-top时影响父div的margin-top
1、使用overflow:hidden 此时不要指定父div的height, 不然会将子div超出父div的内容隐藏。这个用法非常好!
.container{width: 50%;margin: 0px auto;background-color: #919191;overflow:hidden;}
2、使用float
.container{width: 50%;margin: 0px auto;background-color: #919191;float: left;}
3、使用position:absolute
.container{width: 50%;margin: 0px auto;background-color: #919191;position: absolute;}