<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. 访问日志IO性能优化

    在高并发量的场景下磁盘IO往往是性能的瓶颈所在,访问日志涉及到频繁的写操作,所以这部分要尽可能地优化,不然将拖累系统的整体性能.针对文件记录及数据库记录两种方式可以有以下措施提高写性能, l 避免频繁 ...

  2. Device tree customization

    Step 1: OEMs can create their own device tree by adding "qcom,msm-id/qcom,board-id" entry ...

  3. 【一天一道LeetCode】#50. Pow(x, n)

    一天一道LeetCode系列 (一)题目 Implement pow(x, n). (二)解题 题目很简单,实现x的n次方. /* 需要注意一下几点: 1.n==0时,返回值为1 2.x==1时,返回 ...

  4. Java关键字之this

    this的作用: 1) this是当前对象的一个引用,便于对当前对象参数的使用: 2)可以返回对象的自己这个类的引用,同时还可以在一个构造函数当中调用另一个构造函数 this示例: public cl ...

  5. Spring揭秘 读书笔记 三 bean的scope与FactoryBean

    本书可作为王富强所著<<Spring揭秘>>一书的读书笔记  第四章 BeanFactory的xml之旅 bean的scope scope有时被翻译为"作用域&quo ...

  6. 集团公司（嵌入ETL工具）财务报表系统解决方案

    集团公司(嵌入ETL工具)财务报表系统解决方案 一.项目背景: 某集团公司是一家拥有100多家子公司的大型集团公司,旗下子公司涉及各行各业,包括:金矿.铜矿.房产.化纤等.由于子公司在业务上的差异,子 ...

  7. FFMPEG结构体分析：AVStream

    注:写了一系列的结构体的分析的文章,在这里列一个列表: FFMPEG结构体分析:AVFrame FFMPEG结构体分析:AVFormatContext FFMPEG结构体分析:AVCodecConte ...

  8. AngularJS进阶(四)ANGULAR.JS实现下拉菜单单选

    ANGULAR.JS: NG-SELECT AND NG-OPTIONS PS:其实看英文文档比看中文文档更容易理解,前提是你的英语基础还可以.英文文档对于知识点讲述简明扼要,通俗易懂,而有些中文文档 ...

  9. 关于Maven中打包命令(项目中打补丁的时候用到)

     打jar包的方式  mvn package -Dmaven.test.skip=true              mvn install -Dmaven.test.skip=true      ...

  10. Android群英传笔记——第五章：Android Scroll分析

    Android群英传笔记--第五章:Android Scroll分析 滑动事件算是Android比较常用的效果了,而且滑动事件他本身也是有许多的知识点,今天,我们就一起来耍耍Scroll吧 一.滑动效 ...