<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. 解决log4cxx退出时的异常

    解决log4cxx退出时的异常(金庆的专栏)如果使用log4cxx的FileWatchdog线程来监视日志配置文件进行动态配置,就可能碰到程序退出时产生的异常.程序退出时清理工作耗时很长时,该异常很容 ...

  2. Miner.java 爬虫启动类

    Miner.java 爬虫启动类 package com.iteye.injavawetrust.miner; import java.util.concurrent.ThreadPoolExecut ...

  3. SpriteBuilder中CCMotionStreak提示图片文件找不到

    今天写代码时遇到上述问题,代码如下: player.streak = [CCMotionStreak streakWithFade:3.f minSeg:1 width:30 color:[CCCol ...

  4. memcached /usr/local/memcached/bin/memcached: error while loading shared libraries: libevent-2.0.so.5: cannot open shared object file: No such file or directory

    启动memcached的时候发现找不到libevent的库,这是memcache的默认查找路径不包含libevent的安装路径,所以要告诉memcached去哪里查找libevent. 操作命令如下: ...

  5. Java 类加载机制 ClassLoder

    纸上得来终觉浅,绝知此事要躬行  --陆游       问渠那得清如许,为有源头活水来  --朱熹 一个类从被加载到内存中开始到卸载出内存为止,它的整个生命周期包括了:加载(loading).验证(V ...

  6. Leetcode_137_Single Number II

    本文是在学习中的总结,欢迎转载但请注明出处:http://blog.csdn.net/pistolove/article/details/42877129 Given an array of inte ...

  7. VectorDrawable与AnimatedVectorDrawable

    VectorDrawable  Android L开始提供了新的API VectorDrawable 可以使用SVG类型的资源,也就是矢量图.先来一个例子吧. <?xml version=&qu ...

  8. Linux - test测试标志的意思总结

    测试的标志 代表意义 1. 关於某个档名的『文件类型』判断,如 test -e filename 表示存在否 -e 该『档名』是否存在?(常用) -f 该『档名』是否存在且为文件(file)?(常用) ...

  9. 一个清除Xcode项目占用大量空间的脚本

    如果将Xcode项目的Derived Data保留在每个项目的相对路径里的话,久而久之该文件夹里会占用大量的空间,多达百兆计算. 其中DerivedData中很多文件是Xcode项目编译和执行的缓存, ...

  10. Spring的声明式事务管理

    在service类前加上@Transactional,声明这个service所有方法需要事务管理.每一个业务方法开始时都会打开一个事务. Spring默认情况下会对运行期例外(RunTimeExcep ...