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

相关文章

来自专栏HTML5学堂

CSS 1.0~3.0选择器(中)

HTML5学堂:上一篇 讲到CSS1.0~CSS3.0选择器的兼容问题等,CSS选择器的使用是特别广泛的,大家也会经常用到,而用到的选择器有哪些?接下来本文会介...

2783
来自专栏WOLFRAM

找寻欧式距离在Mathematica当中的用法

1503
来自专栏有趣的django

21.jQuery

简介 jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情...

3219
来自专栏自动化测试实战

flask第二十八篇——HTML【1】table标签

2397
来自专栏新工科课程建设探讨——以能源与动力工程专业为例

3.4 js生成报表

如下函数示意在ID为tbHost的元素内追加一个表格:假设nodes为二维数组,遍历其所有行和列,将其元素的Ap属性以二维表格的形式显式出来。通过该函数可以直观...

950
来自专栏zaking's

CSS(CSS3)选择器(1)

这篇文章主要用于存储CSS以及CSS3的选择器部分知识,以便日后查阅及记忆. 该内容分为两部分,第一部分为css选择器的一些基本知识。第二部分为CSS3新增...

27910
来自专栏黒之染开发日记

css3动画在手机端的流畅度比较

我发现即使都是用css3的transition做动画,有的属性在动画播放时却会不流畅,出现定格动画的效果,这里做个比较,方便我以后做动画。

1192
来自专栏coding for love

CSS入门8-三大特性之层叠特性与优先级

(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)

803
来自专栏james大数据架构

jQuery方法position()与offset()区别

参考别人写得比较明白的,红色部分为重点吧: 使用jQuery获取元素位置时,我们会使用position()或offset()方法,两个方法都返回一个包含两个属性...

1676
来自专栏用户3211691的专栏

CSS——可视化格式模型

<div> some inline text <p>more text</p> ...

442

扫码关注云+社区