1. stack order 发生在BFC计算好了之后。

2.一个一个的BFC里面,不同的block 里面的stack context 会根据 stack order的顺序,进行堆叠。呈现互相遮盖的效果。

例如:

<body>
<style>
div{ border: 1px solid green;}
</style>
<div style="float: left">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div style="float: right;">bbbbbbbbbbbbbbbbbbbbbbbbbbi
<div style="position:relative; border:1px solid red; width:100px;height:100px;margin-top:-30px;left:20px;background-color:green"> </div> </div> </body>

  

效果如上图所示, 第一个div, 和第二个div都是一个独立的BFC, 各种进行计算之后,在进行stack oder 的堆叠。

自己理解BFC 和 stack context , stack order的更多相关文章

  1. structs2 对ActionContext valueStack stack context 的理解 图片实例

    structs2 对ActionContext valueStack stack context 的理解 ActionConext : The ActionContext is the context ...

  2. Java 集合深入理解(13):Stack 栈

    点击查看 Java 集合框架深入理解 系列, - ( ゜- ゜)つロ 乾杯~ 今天心情不错,再来一篇 Stack ! 数据结构中的 栈 数据结构中,栈是一种线性数据结构,遵从 LIFO(后进先出)的操 ...

  3. Struts2的Stack Context和ValueStack

    1.提到Struts2的传值功能时,经常会见到Stack Context和ValueStack等概念,那么它们到底是什么,有什么作用呢. ValueStack(值栈):Struts2将OGNL上下文设 ...

  4. struts2.1.6教程四_2、ActionContext 、ValueStack 、Stack Context

    ActionContext 一次Action调用都会创建一个ActionContext 调用:ActionContext context = ActionContext.getContext() Va ...

  5. 27.OGNL与ValueStack(VS)-获取Stack Context中的信息

    转自:https://wenku.baidu.com/view/84fa86ae360cba1aa911da02.html 我们知道,除了可以从值栈中获取信息,还可以从Stack Context中获取 ...

  6. [知识库:python-tornado]异步调用中的上下文控制Tornado stack context

    异步调用中的上下文控制Tornado stack context https://www.zouyesheng.com/context-in-async-env.html 这篇文章真心不错, 非常透彻 ...

  7. Struts2(六.用标签显示用户列表及Value Stack和Stack Context)

    一.用Struts2标签显示用户列表 原理: 在struts中可以通过在action中将所有用户的信息存入到某个范围中,然后转向userlist.jsp,进行访问 原则: 在jsp网页上,尽量不要出现 ...

  8. 对于BFC(block format context)理解

    目录 前言 Box: CSS布局的基本单位&盒模型 什么是BFC?(Block formatting contexts) 元素与盒 正常流 块级与行内级 产生垂直外边距合并的必备条件 前言 什 ...

  9. 全面理解BFC

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...

随机推荐

  1. Kernel 4.9的BBR拥塞控制算法与锐速

    重要的事情说三遍! BBR并不能突破带宽限制!!! BBR并不能突破带宽限制!!! BBR并不能突破带宽限制!!! 它的功能如下: 1.在高丢包率与低速率的网络中提升传输效果,充分利用带宽. 2.降低 ...

  2. 再谈JavaScript中的闭包

    一.什么是闭包 闭包就是有权访问另一个函数作用域中变量的函数,因此,闭包的本质是一个函数.当一个内部函数被保存到外部时,就会生成闭包. 二.闭包的作用 1.实现公有变量,即通过局部变量实现全局变量的效 ...

  3. CentOS 7下启动postfix服务报错:fatal: parameter inet_interfaces: no local interface found for ::1

    sed -i 's/inet_interfaces = localhost/inet_interfaces = all' /etc/postfix/main.cf service postfix re ...

  4. PHP-FPM 不完全指南

    fpm工作流程 fpm全名是FastCGI进程管理器(FastCGI是啥?了解下cgi和fastcgi). fpm启动后会先读php.ini,然后再读相应的conf配置文件,conf配置可以覆盖php ...

  5. 关于流媒体(m3u8)的下载与播放

    求助:关于流媒体(m3u8)的下载与播放 http://www.cocoachina.com/bbs/read.php?tid-93389.html 此文有相关讨论.demo等,可关注.

  6. 技术人生:special considerations that are very important

    For the most part, a lot of what we know about software development can be applied to different envi ...

  7. 【C++】STL常用容器总结之五:双端队列deque

    6.双端队列deque 所谓的deque是”double ended queue”的缩写,双端队列不论在尾部或头部插入元素,都十分迅速.而在中间插入元素则会比较费时,因为必须移动中间其他的元素.双端队 ...

  8. Windows 下安装NPM

    第一步: 下载node.js的windows版 当前最新版本是https://nodejs.org/dist/   第二步:设置环境变量 把node.exe所在目录加入到PATH环境变量中. 配置成功 ...

  9. linux配置nginx

    相关命令: nginx -s reload  :修改配置后重新加载生效 nginx -s reopen  :重新打开日志文件nginx -t -c /path/to/nginx.conf 测试ngin ...

  10. Android之防止反编译技巧

    1. 判断程序是否运行在模拟器上 boolean isRunningInEmualtor() { boolean qemuKernel = false; Process process = null; ...