<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. java组播MulticastSocket

    在单播模式中有服务器端和客户端之分,而组播模式与单播模式不同,每个端都是以路由器或交换机做为中转广播站,任意一端向路由器或交换机发送消息,路由或交换机负责发送其他节点,每个节点都是同等的.所以在编程模 ...

  2. PYTHON风格规范-Google 开源项目风格指南

    Python风格规范 分号 Tip 不要在行尾加分号, 也不要用分号将两条命令放在同一行. 行长度 Tip 每行不超过80个字符 例外: 长的导入模块语句 注释里的URL 不要使用反斜杠连接行. Py ...

  3. 手把手带你画一个 时尚仪表盘 Android 自定义View

    拿到美工效果图,咱们程序员就得画得一模一样. 为了不被老板喷,只能多练啊. 听说你觉得前面几篇都so easy,那今天就带你做个相对比较复杂的. 转载请注明出处:http://blog.csdn.ne ...

  4. How Many Processes Should Be Set For The Receiving Transaction Manager (RTM)

    In this Document   Goal   Solution   References APPLIES TO: Oracle Inventory Management - Version 10 ...

  5. Cocos2d中update与fixedUpdate的区别(二)

    关于update:方法的目的 update:方法的目的在于给你一个更新你的游戏(你游戏中的所有对象,标签等待)的机会,在它们被渲染到屏幕之前. 换句话说,如果你想要一些游戏对象显示在屏幕的特定位置,你 ...

  6. 自己动手写web框架----1

    本文可作为<<自己动手写struts–构建基于MVC的Web开发框架>>一书的读书笔记. 一个符合Model 2规范的web框架的架构图应该如下: Controller层的Se ...

  7. Linux C OSS音频编程

    在linux下也可以写一个类似麦克风和喇叭这样的应用程序,只要打开/dev/dsp这个设备驱动,对该设备read读操作相当于录音,对这个设备write写操作相当于放音. 对于以下出现的一些参数我就不多 ...

  8. Material Design之CardView的使用

    本文介绍CardView这个控件的使用,CardView继承至FrameLayout类,是support-v7包下的一个类,使用时必须引入cardview依赖包,可在下载的sdk文件夹中找到... 使 ...

  9. 程序员的视角：java 线程

    在我们开始谈线程之前,不得不提下进程. 无论进程还是线程都是很抽象的概念,有一个关于进程和线程很形象的比喻能帮我们更好的理解. 进程就像个房子,房子是一个包含了特定属性的容器,例如空间大小.卧室数量等 ...

  10. 一步操作关闭iOS状态栏(电池栏)

    状态栏某时也蛮碍眼的: 将其关闭很简单:打开项目的info.plist文件,添加新的属性为NO的一行 View controller-based status bar appearance : 最后结 ...