BFC布局规则：

  1. 内部的Box会在垂直方向，一个接一个地放置。
  2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
  3. 每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
  4. BFC的区域不会与float box重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
  6. 计算BFC的高度时，浮动元素也参与计算

其中第4条：BFC的区域不会与float box重叠

　　

  1. <style type="text/css">
  2.         .first{
  3.             width:100px;
  4.             height:100px;
  5.             background-color:red;
  6.             float:left;
  7.         }
  8.         .second{
  9.             width:200px;
  10.             height:200px;
  11.             background-color:blue;
  12.             overflow: hidden;
  13.             /*position:absolute;*/
  14.  
  15.         }
  16.     </style>
  17.     <body>
  18.         <div class="first"></div>
  19.         <div class="second"></div>
  20.     </body>

　　按照上述的写法，两个div确实没有发生重叠，并且按照预期的那样水平排放。

  1. <style type="text/css">
  2.         .first{
  3.             width:100px;
  4.             height:100px;
  5.             background-color:red;
  6.             float:left;
  7.         }
  8.         .second{
  9.             width:200px;
  10.             height:200px;
  11.             background-color:blue;
  12.             /*overflow: hidden;*/
  13.             position:absolute;
  14.  
  15.         }
  16.     </style>
  17.     <body>
  18.         <div class="first"></div>
  19.         <div class="second"></div>
  20.     </body>

随后，将second中生成BFC的元素overflow:hidden改为position:absolute;.这时候将，看到second将first覆盖了

。看来，绝对定位还有点奇怪。

随后，于是我给蓝色块中添加一个小块，并给出绝对定位。

代码如下：

  1. <style type="text/css">
  2.         .first{
  3.             width:100px;
  4.             height:100px;
  5.             background-color:red;
  6.             /*float:left;*/
  7.         }
  8.         .second{
  9.             width:200px;
  10.             height:200px;
  11.             background-color:blue;
  12.             /*overflow: hidden;*/
  13.             /*position:absolute;*/
  14.  
  15.         }
  16.         .second-1{
  17.             width:100px;
  18.             height:100px;
  19.             background:green;
  20.         }
  21.     </style>
  22.     <body>
  23.         <div class="first"></div>
  24.         <div class="second">
  25.             <div class="second-1"></div>
  26.         </div>
  27.     </body>

而从样式可以发现绿色的小DIV并没有定位到想象中的页面左上角去，而是停留在他原来的位置。

这时候只要给绿色的小DIV的样式添加一个top:0;left:0;才会跑到页面左上角去。

这说明，只给出position:absolute;只让该元素脱离了普通文档流，而并没有改变他的位置

结论：给定一个元素position:absolute;而不给出top与left值，它就会去先找父元素并定位，随后，给出top与left值之后所呈现的位置才是定义的样式。

个人理解，如有不足，还请指教

BFC引发的关于position的思考的更多相关文章

  1. 由异常：Repeated column in mapping for entity/should be mapped with insert="false" update="false 引发对jpa关联的思考

    由异常:Repeated column in mapping for entity/should be mapped with insert="false" update=&quo ...

  2. try catch引发的性能优化深度思考

    关键代码拆解成如下图所示(无关部分已省略): 起初我认为可能是这个 getRowDataItemNumberFormat 函数里面某些方法执行太慢,从 formatData.replace 到 une ...

  3. Topk引发的一些简单的思考

    软件工程课程的一个题目:写一个程序,分析一个文本文件中各个词出现的频率,并且把频率最高的10个词打印出来.文本文件大约是30KB~300KB大小. 首先说一下这边的具体的实现都是在linux上实现的. ...

  4. 一个神秘现象引发对beego框架的思考

    小强最近在项目中遇到了一个很奇怪的问题:在整改日志规范时,为了避免影响现有的代码结构以及改动尽可能小的前提下,在调用记日志的SDK处将某一个字段值首字母改为大写,代码示例如下: fmt.Println ...

  5. 由mv命令引发的对inode的思考

    一场机器迁移引起的思考 最近团队一台机器老化了,准备做全量迁移,一不小心,就把100多个G的/data目录放到了新机器的/data/data目录下,上愁了,怎么削减一层data目录呢?难倒像Windo ...

  6. 由Menu小项目所引发的对软件工程的思考

    学习了孟老师的这几节课程,我学习了如何搭建一个简单的命令行menu小程序,从最简单的程序开始,一步步的根据软件工程的一般规律,进行逐步开发.完善,最终实现了一个比较通用的menu程序,可以让别的开发者 ...

  7. 由”二进制里不能有3“引发的对parseInt的思考

    看到一道面试题,["1", "2", "3"].map(parseInt) 答案是多少? 心生好奇,做做看,发现卡住,没什么头绪.首先对pa ...

  8. 由Vue引发的getter和setter思考

    公司的新项目决定使用Vue.js来做,当我打印出Vue实例下的data对象里的属性时,发现了一个有趣的事情: 它的每个属性都有两个相对应的get和set方法,我觉的这是多此一举的,于是去网上查了查Vu ...

  9. setTimeout(fn, 0)引发的JavaScipt线程的思考

    起因 周五改一个checkbox的display属性被错误地设置为none的bug. 经debug发现, 有两个地方修改了display属性: 1) checkbox的controller; 2) c ...

随机推荐

  1. linux内核中与进程相关的数据结构（基于linux3.16-rc4）

    1.进程描述符 struct task_struct { volatile long state; ....... struct list_head tasks; ....... struct mm_ ...

  2. Python subprocess Popen

    目的:顺序执行进程  在Bash里面类似  a.sh && b.sh && c.sh 先来说下Popen这个函数 class subprocess.Popen(args ...

  3. Spark系列(三)SparkContext分析

    SparkContext初始化流程图 其它说明: 在createTaskScheduler会根据不同的提交模式创建backend对象(如本地模式为LocalBackend). 在SparkDeploy ...

  4. HDU-4618 Palindrome Sub-Array 暴力枚举

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4618 直接暴力枚举中心点,在中间如果求不出最大值直接跳过优化下... //STATUS:C++_AC_ ...

  5. 【推荐】JavaScript的那些书

    又好久没写东西了,写上一篇的时候还以为接下来的工作会轻松一些,结果未从我所愿呐,又是一阵忙碌.而这段时间穿插着做了很多12年淘宝校园招聘的前端面试,很多同学都有问到,学校里没有前端的课程,那如何学习J ...

  6. sublime text2注册码

    ----- BEGIN LICENSE ----- Andrew Weber Single User License EA7E-855605 813A03DD 5E4AD9E6 6C0EEB94 BC ...

  7. Java字符流读写数据的两种方式

    第一种方式:逐个字符进行读写操作(代码注释以及详细内容空闲补充) package IODemo; import java.io.FileReader; import java.io.FileWrite ...

  8. Keil uCos 2.52 stm32 【worldsing笔记】

    1.uCOSii V2.52    a.加了7个可以配置的钩子函数宏     #define OS_TASK_CREATE_HOOK_EN    0    /* 任务创建时调用钩子函数      使能 ...

  9. Jquery ajax 得到返回值

    Jquery ajax 得到返回值 1.ajax默认是异步调用的,所以得到的返回值是空值,要得到值必须改成同步:async: false,//同步. 2.必须定义一个全局变量 var result = ...

  10. sonne_game网站开发03 spring-mvc+freemarker整合

    今天的任务就是在spring+mybatis+springmvc的基础上,将freemarker整合进来. freemarker是什么? freemarker是一种模板引擎.它的目的是基于模板和数据, ...