专栏首页练小习的专栏可视化格式模型-BFC

可视化格式模型-BFC

在常规流中的框(boxes,元素形成的矩形区域),都属于一个格式化的上下文中,可能是块的,也可能是行内的,但不可能同时是行内的又是块的。块框参与块格式化上下文。行内框参与行内格式化上下文。

块格式化上下文(Block formatting contexts) 有的资料上将 context 翻译成 “内容”。在这里,之所以把context翻译成“上下文”,是因为,它强调框存在的环境。所谓上下文,有活动范围,有效区域的意思。

如何触发 浮动元素,绝对定位元素,inline-blocks,table-cells,table-captions,以及 ‘overflow’不是 ‘visible’的元素,会创建新的block formatting context。

在CSS3中,对这个概念做了改动,CSS3中,将Block formatting context 叫做 flow root。对于触发方式也做了修改。(http://www.w3.org/TR/css3-box/#block-level0

它做了什么

这也是一个比较抽象的概念。可以把它想象成一个大箱子,里面装着很多元素,箱子可以隔开里面的元素和外面的元素。好像JS中的闭包,保护其中的元素。它可以包含浮动元素,可以阻止margin折叠,可以防止元素被浮动元素覆盖……

块格式化内容是个重要的概念,它对宽高的计算,margin折叠,定位等都有一定的影响。后续会有详细的说明。

在块格式化上下文中,框会一个接一个地被垂直放置,它们的起点是一个包含块的顶部。两个兄弟框之间的垂直距离取决于’margin’属性。在block formatting context中相邻的块级元素的垂直边距会折叠(collapse)。

在块格式化上下文中,每一个元素左外边与包含块的左边相接触(对于从右到左的格式化,右外边接触右边),即使存在浮动也是如此(尽管一个元素的内容区域会由于浮动而压缩),除非这个元素也创建了一个新的block formatting context。

现实意义

Block formatting context 表现的很像普通的块框,那么它比较特殊的地方在哪里呢? 1. 可以包含浮动元素 2. 不被浮动元素覆盖 3. 阻止父子元素的 margin 折叠

另外,Block formatting context 的特性在某些地方像 IE 中的 hasLayout

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 可视化格式模型-绝对定位

    相对包含块偏移定位 在绝对定位模型中,一个框明确地基于它的包含块偏移。不是父元素,这点需注意。 要是人家问你,绝对定位相对于谁定位啊?你很快乐的说:它的父元...

    练小习
  • 渲染放大的图片image-rendering笔记

    image-rendering: pixelated,控制浏览器如何渲染放大的图片,比如图像的自然尺寸为100×100像素,但网页指定其尺寸不为100*100像...

    练小习
  • 文字上右下环绕广告的写法

    很久一段时间,我都在寻求一种文字从上-右-下方向环绕广告位的一个办法,而在找到之前,基本都是利用发布编辑器的所见即所得模式来实现广告的环绕。或者是利用程序截取一...

    练小习
  • Nginx-helper纯代码版,文章评论发布自动清理Fastcgi缓存

    摘 要 张戈博客之前分享过Nginx开启fastcgi静态缓存加速的教程,文中也提到了WordPress对应的最佳配套插件:Nginx-Helper。本文分享...

    张戈
  • 如何用 Go 实现单链表

    每节运煤车就是单链表里的元素,每节车厢里的煤炭就是元素中保存的数据。前后车通过锁链相连,作为单链表运煤车,从1号车厢开始,每节车厢都知道后面拉着哪一节车厢,却不...

    懒人记
  • 码农晋升为技术管理者后,痛并快乐着的纠结内心

    有一个非常有趣的现象:据说大部分的技术管理者,在其从程序员转为管理岗位的时候,都是在领导或公司的要求下,被动的推到管理岗位上的,并非是自己当初有强烈意愿、主动去...

    三哥
  • 码农晋升为技术管理者后,痛并快乐着的纠结内心

    有一个非常有趣的现象:据说大部分的技术管理者,在其从程序员转为管理岗位的时候,都是在领导或公司的要求下,被动的推到管理岗位上的,并非是自己当初有强烈意愿、主动去...

    黄泽杰
  • Spring Websocket 中文文档 (spring5)

    这部分参考文档包括对Servlet堆栈的支持,包括原始WebSocket交互的WebSocket消息传递,通过SockJS的WebSocket仿真,以及通过ST...

    gemron的空间
  • 关于容灾处理的一些思考

    对于一个大流量互联网应用来说,系统的稳定性至关重要。可惜,稳定性目标并不那么轻易能够达成。现实中,种种意想不到的问题会出现。但是,本着专业的严谨,还是需要尽可能...

    lyb-geek
  • 程序员如何从技术岗转为技术管理层?

    有一个非常有趣的现象:据说大部分的技术管理者,在其从程序员转为管理岗位的时候,都是在领导或公司的要求下,被动的推到管理岗位上的,并非是自己当初有强烈意愿、主动去...

    JAVA高级架构开发

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动