子DIV设置margin-top影响父DIV位置的解决办法

父div如果没有任何东西,子div设置margin-top,父div会下落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{padding:0;margin:0;background:#999;}
        .page-content{min-height:600px;background:#fff;}
    </style>
</head>
<body>
    <div class="page-content">
        <div style="margin-top:50px;">gfsdghdfd</div>
    </div>    
</body>
</html>

解决方法
1、修改父元素的高度,增加padding-top样式模拟(padding-top:1px;常用)
2、为父元素添加overflow:hidden;样式即可(完美)
3、为父元素或者子元素声明浮动(float:left;可用)
4、为父元素添加border(border:1px solid transparent可用)
5、为父元素或者子元素声明绝对定位

原文地址:https://www.cnblogs.com/gongshunkai/p/6202374.html