子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、为父元素或者子元素声明绝对定位

posted on 2016-12-20 13:57 codeing-or-artist-?? 阅读(1656) 评论(0) 编辑收藏举报