父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>

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAWgAAADrCAIAAADL1JtAAAAGbUlEQVR4nO3cTXraVgCGUdZgY2P6386btE068KyNGze7YT0ZeDPsI2tRB7Jl/SHpIxhRc86jCY6QbvJw30hXJItfQjc367v7T29/+/1o2939p5ub9cB4Pnz895jjsb2ObeBzdYIf8tMZTzmYxR7h+PDP/Zs3b4+2ffjnfvjP9O+7j8ccj+11bAOfqxP8kJ/OeMrB7BOOv+4+HnkbDYfNtsc2MDdO7UN+OuMpB7NPOGbZTm08ttexndSH6tQ+5AODicPx7v2fs2ynNh7bK9h+ffO290P1x7v3s4znpD7kw384cTgAhAOIxeH4GTh7U8MxfJSfgHMyKRyjmfgROCfj4ehNRv0QPwBnZiQcrWS0YvF9x3fAGRgKR281ql6U7/+25hvgPOwMR7ca9WRUmViv1+v1+gY4J5PCUVWjSkYZi9VqtVqtrp9cAedhJBzVHUq9GmUyylIsl8vlcnlZcwG8dv3h6L3cKKvxGTh7Q+GoVjfKy43yWmPuAQPzGwlH/XJjvV6vVqu5BwzMb1I4qsuN6+vruQcMzG88HNV9ymq1urq6mnvAwPwmhaO6T1kul3MPGJjfSDjqCxzX19fCAXweCEdrZbRc4Li8vJx7wMD8hAOITQpH+Ujl6upKOIDPU8JRPYsVDqCUhePi4mLuAQPzEw4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAWByOAjh7wgHEhAOICQcQe7lwbDeLR7cPX+JxbTfRG8Pdd71pbMxfHm4Xi8VmG50GXp8XCkc5w/5f4ZgwZuGAoiheLBzlX91fMcNmCMeEMQsHFEXxsuHY50pjzwMcLBzDxxAOKIriK8LxvByw2GwfX262ReuK/3kq1vbvnZ59x2vsVjvu7cOX8mW1Q7V7a6+J59gx5v6TCgfsFY72PFssNpvBcDSqUZu6j3Ydr30bUT/qZtMNx2bTOc520jn6w7HjpMIBe4TjaZZV86eaYM8zqnnB0L58aK0mPL6/el1N46e3PO7QvQ5onqEvNU8HHT3HrrXSnngJB2cvD0c5oZr3AY+TbEc4Or/a1Le2UE7Sxl1O8+2NHTovn8/6+K7Rc3T26bsrGfmNwNnIw9G7htieZn2TsHkfUPTv2jhe+dP+hYXha5rWz0bP0TnGwEmFAw4Ujtri6PPL+k7dJYbGfUj/8YbCsWNxtP8Qo+fovBw4qXDAUa44auoLjhMn9UtdcQgH7OsYaxw96jPwYGscA/dA1jjgkA7xVKW6DdkRju7KZTM+ow9N2jt0H6KMhWPCg5ld30AfengEZ+pA3+MYDMeO/Wvzr/ONidHvcaThmHqOwXUZ3+OA0iG+Obq4fdiOrnE05233LqY2S0e/ObpYbLbRGsekc/TeXjX/vaw1DiiK4mD/VqX5jOMYWo9xgCPad3G0MWdfeNGw59tdPT8CjuYrFkfbSwYv97d//wqHbMBc9rxVacXjCHO4FQ83KTAj/+coEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcAAx4QBiwgHEhAOICQcQEw4gJhxATDiAmHAAMeEAYsIBxIQDiAkHEBMOICYcQEw4gJhwADHhAGLCAcSEA4gJBxATDiAmHEBMOICYcACx/wBa8VZ3t9ZKVQAAAABJRU5ErkJggg==" alt="" />

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

子DIV设置margin-top影响父DIV位置的解决办法的更多相关文章

  1. 子div块中设置margin-top时影响父div块位置的解决办法

    在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式 解决办 ...

  2. 子DIV块中设置margin-top时影响父DIV块位置的解决办法？

    解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声 ...

  3. 子div块中设置margin-top时影响父div块位置的解决办法及其原因

    解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 b ...

  4. 子div设置浮动无法把父div撑开。

    <div class="mainBox"> <div class="leftBox"></div> <div clas ...

  5. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  6. 子元素的margin-top影响父元素原因和解决办法

    这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...

  7. 同级div设置display:inline-block，父级div强制不换行

    同级div设置display:inline-block,父级div强制不换行 <html> <head></head> <body> <div i ...

  8. 子元素margin-top为何会影响父元素？

    子元素margin-top为何会影响父元素? 引用地址:https://blog.csdn.net/sinat_27088253/article/details/52954688 2016年10月28 ...

  9. 布局时margin会影响父元素

    布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"> <div class="login&quo ...

  10. 子元素设置margin-top后，父元素跟随下移的问题

    子元素设置margin-top后,父元素跟随下移的问题 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. python基础操作以及hdfs操作

    目录 前言 基础操作 hdfs操作 总结 一.前言        作为一个全栈工程师,必须要熟练掌握各种语言...HelloWorld.最近就被"逼着"走向了python开发之路, ...

  2. 【NLP】Python NLTK 走进大秦帝国

    Python NLTK 走进大秦帝国 作者:白宁超 2016年10月17日18:54:10 摘要:NLTK是由宾夕法尼亚大学计算机和信息科学使用python语言实现的一种自然语言工具包,其收集的大量公 ...

  3. C语言用分别用递归和循环求数字的阶乘的方法

    以下代码均为 自己 实现,嘻嘻! 参考文章:http://blog.csdn.net/talk_8/article/details/46289683 循环法 int CalFactorial(int ...

  4. MFC&Halcon之实时视频监控

    上一篇实现了在MFC的窗体内显示图片,本篇介绍如何在MFC窗体内实时显示摄像头的影像. 要实现的功能是点击一个“开始”按钮,可以显示影像,再点击“停止”按钮,可以停止显示. 因为实时显示影像需要在一个 ...

  5. Xamarin Android 之起始篇

    序言: 在博客园注册了已经有2年多了,快三年了.从开始学习这一行开始就在博客园注册了这个账号.至今也还没有写过一篇随笔,大多时候都是在园子里头潜水,看大牛写的文章,学习. 写博客不为啥,就是自己对自己 ...

  6. 移动端HTML

    display:-webkit-box 把该元素中的所有元素变成块级元素,比如 <ul class="top-nav"> <li>地图</li> ...

  7. Android Studio项目提交到GitHub

    1. 现在并安装Git for Windows: 2. 点击File->Settings->Version Control->Git,配置git.exe的路径,并点击Test按钮测试 ...

  8. .NET RESTful Web Services入门

    很早之前看到过RESTful Web Services,并未在意,也没找相关资料进行学习.今天偶尔有一机会,就找了点资料进行研究,发现RESTful真是“简约而不简单”.下面用示例来说明: 1 项目结 ...

  9. 12款简化 Web 开发的 JavaScript 开发框架

    前端框架简化了开发过程中,像 Bootstrap 和 Foundation 就是前端框架的佼佼者.在这篇文章了,我们编制了一组新鲜的,实用的,可以帮助您建立高质量的 Web 应用程序的 JavaScr ...

  10. C++02.访问控制

    1.class是struct的扩展,它包括数据成员和成员函数. 2.在C++中,有三种访问权限: (1)private:默认,只供类内部的函数使用. (2)public:类外的程序可以使用. (3)p ...