<head>

    <title></title>

    <style type="text/css">

        body

        {

            margin: 0;

            padding: 0;

        }

        #father

        {

            width: 500px;

            height: 400px;

            background: pink;

            border: 1px solid;

        }

        #child

        {

            width: 100px;

            height: 50px;

            margin-top: 20px;

            background: blue;

        }

    </style>

</head>

<body>

    <div id="father">

        <div id="child">

        </div>

    </div>

</body>

给子div添加margin-top: 20px，发现父子DIV都一起相对BODY下移了20PX，为何不是只是子DIV下移20PX ？ 如果我给父DIV添加border: 1px solid，就可以实现父DIV不动，只是子DIV相对父DIV下移了20PX，难道就一定要设置父DIV的border才能实现吗？

给父亲div 设置 overflow: hidden；有个叫 bfc 的东西 叫 块级元素格式化上下文 overflow hidden 或者描边可以触发 bfc 就可以解决这个问题。

overflow  属性：http://www.w3school.com.cn/cssref/pr_pos_overflow.asp

关于overflow的问题的更多相关文章

  1. 【转载】C# 中的委托和事件(详解)

    <div class="postbody"> <div id="cnblogs_post_body" class="blogpost ...

  2. Stack Overflow 排错翻译 - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder

    Stack Overflow 排错翻译  - Closing AlertDialog.Builder in Android -Android环境中关闭AlertDialog.Builder 转自:ht ...

  3. css:overflow属性妙用

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. overflow:hidden与margin:0 auto之间的冲突

    相对于父容器水平居中的代码margin:0 auto与overflow:hidden之间存在冲突.当这两个属性同时应用在一个DIV上时,在chrome浏览器中将无法居中.至于为啥我也不明白.

  5. 移动端浏览器body的overflow:hidden并没有什么作用

    今天突然遇到一个问题,使用li模拟select,但是碰到一个很尴尬的问题,给body加了overflow:hidden,但是body并没有禁止滚动条,滚动条依旧顺滑. <!DOCTYPE htm ...

  6. Stack Overflow: The Architecture - 2016 Edition(Translation)

    原文: https://nickcraver.com/blog/2016/02/17/stack-overflow-the-architecture-2016-edition/ 作者:Nick Cra ...

  7. overflow:hidden清除浮动原理

    overflow:hidden的意思是超出部分去掉,如果父元素height为auto,内部元素浮动,势必会将内部元素全部隐藏,故计算出内部浮动高度顺便清除浮动.

  8. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  9. overflow

    1. 隐藏x轴滚动条,垂直有滚动条: <body> <div style="width:100px;height:150px;overflow:scroll;overflo ...

  10. allocation size overflow

    var cityID="1"; var areaHtml=""; var storeHtml=""; //区域异步 function Get ...

随机推荐

  1. msm8916 dt选用规则

    1.AndroidBoard.mk 选则kernel build 默认配置文件:msm8916_defconfig /device/qcom/msm8916/AndroidBoard.mk #---- ...

  2. Mahout系列之-----相似度

    Mahout推荐系统中有许多相似度实现,这些组件实现了计算不能User之间或Item之间的相似度.对于数据量以及数据类型不同的数据源,需要不同的相似度计算方法来提高推荐性能,在mahout提供了大量用 ...

  3. Ubuntu下编译SHTOOLS

    SHTOOLS是使用Fortran语言写的一个专门用于处理球谐函数的一个开源库,更多的介绍请猛戳这里,关于这个库的安装和使用,都在官网上有详细的说明,虽然很详细,但是编译的时候还是比较费劲,下面将我在 ...

  4. Android群英传笔记——第十章：Android性能优化

    Android群英传笔记--第十章:Android性能优化 随着Android应用增多,功能越来越复杂,布局也越来越丰富了,而这些也成为了阻碍一个应用流畅运行,因此,对复杂的功能进行性能优化是创造高质 ...

  5. Java-HttpSession

    //session给用户一种标志,让用户可以在不同页面以及网站中都有一个特殊的标记 public interface HttpSession { /** * Returns the time when ...

  6. 【Java编程】Java学习笔记<二>

    种访问权限,而类的访问控制级别只有public和缺省的,当为public时,可以被任何包的其他类访问,当为缺省时,只能被同一包的其他类访问.如果类自身对另一个类是不可见的,即使类的成员声明为publi ...

  7. Android性能优化之界面UI篇

    1.使用style.color.string.dimen样式来分离xml布局文件,减少代码的重复使用,增加代码复用率,防止hardcode,下面是一个例子: 在定义layout时候,因为每个View或 ...

  8. CentOS 7 运行级别的切换

    CentOS 7 运行级别的切换 由命令行级别切换到窗口级别的命令未变:init 5或startx 由窗口级别切换到命令行级别的命令未变:init 3 新版本的运行级别都定义在 /lib/system ...

  9. 史上最全Android Studio快捷键 -2016-02-28

  10. Unity 数据Json格式的转换

    把对象转换为字节序列的过程称为对象的序列化. 把字节序列化恢复为对象过程称为对象的反序列化. JSON格式的转换,是一大神给我说的,让我拿来存储数据库时对一些数据的处理,感觉特别好用.但是我并没有深入 ...