可视化格式模型-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 条评论
登录 后参与评论

相关文章

来自专栏我的小碗汤

用go语言爬取珍爱网 | 第二回

昨天我们一起爬取珍爱网首页,拿到了城市列表页面,接下来在返回体城市列表中提取城市和url,即下图中的a标签里的href的值和innerText值。

1014
来自专栏進无尽的文章

实践-小细节 Ⅰ

     开发中总有一些细枝末节的东西是容易出错的地方,搜集总结下,避免再次掉入坑中。

722
来自专栏大数据钻研

献给前端的小伙伴,祝大家面试顺利!

HTML相关问题 1.XHTML和HTML有什么区别 HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言 最主要的不同: XHTM...

2815
来自专栏用户2442861的专栏

在 PyQt4 中的菜单和工具栏¶

http://www.cppblog.com/mirguest/archive/2012/02/05/164982.html

722
来自专栏影子

jQuery中的常用内容总结(一)

3329
来自专栏LeoXu的博客

Flex笔记_MX DataGrid、列表和树

columnCount、columnWidth、dataProvider、iconField、iconFunction、labelField、labelFun...

942
来自专栏前端说吧

JS-DOM 综合练习-动态添加删除班级成绩表

3518
来自专栏nummy

reStructuredtext快速入门

reStructuredText是一种reStructuredText是一种轻量级的文本标记语言,简单易读,所见即所得的文本标记语言。

642
来自专栏SHERlocked93的前端小站

CSS margin合并问题

在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因而所结合成的外边距称为折...

1473
来自专栏向治洪

java的双缓冲技术

Java的强大特性让其在游戏编程和多媒体动画处理方面也毫不逊色。在Java游戏编程和动画编程中最常见的就是对于屏幕闪烁的处理。本文从J2SE的一个再现了屏幕闪...

2518

扫码关注云+社区