<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. CSS引入

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Android scrollview嵌套webview滑动冲突的解决方案

    在Android开发中有时我们需要在scrollview中嵌套webview这时你会发现这两者的滑动事件产生了冲突导致:webview很难被滑动,即使被滑动了一点也非常不顺畅.解决方案也比较简单只需要 ...

  3. 传统定时器技术 Timer and TimerTask

    本文为张孝祥java并发课程的学习笔记. java.util.Timer定时器,实际上是个线程,定时调度所拥有的TimerTasks. 一个TimerTask实际上就是一个拥有run方法的类,需要定时 ...

  4. Android特效专辑（九）——仿微信雷达搜索好友特效，逻辑清晰实现简单

    Android特效专辑(九)--仿微信雷达搜索好友特效,逻辑清晰实现简单 不知不觉这个春节也已经过完了,遗憾家里没网,没能及时给大家送上祝福,今天回到深圳,明天就要上班了,小伙伴们是不是和我一样呢?今 ...

  5. java--加强之 eclipse开发工具

    转载请申明出处:http://blog.csdn.net/xmxkf/article/details/9943899 1.eclipse及IDE开发工具介绍 1.MyEcliose原本是Eclipse ...

  6. obj-c利用dispatch库并发示例

    我们首先写一个纯C的程序,代码的功能为显示指定范围整数中素数的个数: #include <stdio.h> #include <stdlib.h> #include <s ...

  7. 是我out了,c11标准出炉鸟

    gcc -std=c11 -Wall -O3 -g0 -s -o x.c x 或者 clang -std=c11 -Wall -O3 -g0 -s -o x.c x 来吧! 我是有多无聊啊 测试代码: ...

  8. Hadoop Bloom Filter 使用

    1.Bloom Filter  默认的 BloomFilter filter =new BloomFilter(10,2,1); // 过滤器长度为10 ,用2哈希函数,MURMUR_HASH (1) ...

  9. 配置SharePoint环境加域提示网络名不可用[已解决]

    今天去客户给机器做备机,带着装好SharePoint07的机器跑过去了,先做个LAN,然后连上机器开始工作:首先当然是改ip地址,然后都改好了开始加域,加了好几次,发现都不行,提示"指定的网 ...

  10. 快速掌握Oracle异常

    自定义例外是指由PL/SQL开发人员所定义的例外.预定义例外和非预定义例外都和Oracle错误有关,并且出现Oracle错误时会隐含的处罚相应例外:而自定义例外与Oracle错误没有任何关联,它是由开 ...