如何解决子div设置margin-top时影响父div的margin-top

来源：互联网发布：淘宝旗舰店的手机编辑：程序博客网时间：2024/05/29 16:46

测试代码如下：

<!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;}

0 0