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

相关文章

来自专栏前端知识分享

第147天:web前端开发中的各种居中总结

方法① :行内元素 (父元素)text-align,(子元素)inline-block

794
来自专栏杨龙飞前端

BFC概念和作用,触发条件

1146
来自专栏阮一峰的网络日志

CSS选择器笔记

这几天拿出来看了一下,发现很多都忘记了。所以,我决定把它们贴在这里,方便以后查看。这对其他朋友应该也是有用的,毕竟选择器是制作网页效果的第一步。

732
来自专栏我分享我快乐

WEB布局基础知识点图解

611
来自专栏练小习的专栏

可视化格式模型-包含块

一个元素box的定位和尺寸,有时候会跟某一矩形框有关,这个矩形框,就被称作元素的包含块。而元素会为它的子孙元素创建包含块,那么,是不是说,元素的包含块就是它的父...

1898
来自专栏极乐技术社区

wxss学习系列《二》尺寸(Dimension),外边距(margin)和内边距(padding)

尺寸(Dimension) 下班回来了继续看,尺寸:dimension; 一.尺寸属性:允许控制元素的宽和高,还可以设置行间距。 1.height:设置元素的高...

1686
来自专栏偏前端工程师的驿站

javascript实例:逐条记录停顿的走马灯

效果: ? 需求: 1.记录循环滚动; 2.每组记录之间不能有留白; 3.每条记录上移到容器的顶部时要停顿一下; 4.鼠标移入容器时停止滚动,移出时继续滚动。 ...

1715
来自专栏练小习的专栏

可视化格式模型-定位系统

CSS2.1中,一个框(box,就是元素形成的方块等)可以根据三种定位体系布局。 常规流(Normal flow) 常规流,是对 normal flow的直译。...

1666
来自专栏HTML5学堂

CSS 1.0~3.0选择器(下)

HTML5学堂:对于CSS选择器我们熟悉了CSS1.0~CSS2.0的使用,我们那么有些选择器还是无法简单获取某元素,对于CSS3的选择器的产生,让我们更加方便...

2943
来自专栏练小习的专栏

可视化格式模型-相对定位

一旦一个框按照常规流或者是浮动得到定位,它还可以相对该位置而偏移。这就是相对定位。按照这种方式偏移一个框(B1)不会对后续的框(B2)有影响: B2在定位时,...

1718

扫码关注云+社区