Skip to content
Menu
CFC Studio
  • 实验室主页
  • CFC 招新简章
  • 友情链接
  • RSS订阅
CFC Studio

理解块格式化上下文(BFC)

Posted on 2017年2月26日2017年2月27日 by 知秋

块格式化上下文对定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除 同一块格式化上下文中 在它前面的元素的浮动。

引自MDN:

块格式化上下文(block formatting context) 是Web页面的可视CSS渲染的一部分。它是块盒子的布局发生及浮动体彼此交互的区域。

简单来说,块格式化上下文就是块状元素定位的“语境”。

块格式化上下文由以下之一创建:

  • 根元素或其它包含它的元素
  • 浮动 (元素的 float 不是 none)
  • 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
  • 内联块 inline-blocks (元素具有 display : inline-block)
  • 表格单元格 (元素具有 display : table-cell,HTML表格单元格默认属性)
  • 表格标题 (元素具有 display : table-caption, HTML表格标题默认属性)
  • 块元素的 overflow 值不是 visible
  • 弹性盒子 flex boxes (元素具有display : flex 或 inline-flex)
  • display : flow-root

一个块格式化上下文包括创建它的元素内部所有不在新的块格式化上下文元素之内的内容。

举个?:

1
2
3
4
5
6
<div name="d1" class="container">
<div name="d2"></div>
<div name="d3" class="new-context">
<div name="d4"></div>
</div>
</div>
1
2
.container {overflow: hidden}
.new-context {overflow: hidden}

根据定义,以上class为container和new-context的div分别在其内部创建了新的块格式化上下文。d2,d3处于container所创建的上下文中,而d4处于new-context所创建的上下文中。

那么处于同一BFC下的块状有什么特性,我们又该如何加以利用呢?

用BFC取消垂直外边距合并

根据W3C:

在同一BFC中,各个块状元素的左边界与其包含块的左边界对齐(在从右往左读的格式中是在右边对齐)。在存在浮动的情况下,此规则依然有效(尽管元素的宽度可能会因为浮动缩小),除非该块状元素建立了一个新的BFC。

在同一BFC中,块状元素的垂直外边距会合并,比如:

1
2
3
4
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
1
2
.container {background-color: blue; overflow: hidden;}
p {background-color: green; margin: 10px, 0;}

按理说两个p标签之间的距离应该为20px,但实际上由于垂直外边距合并的存在,它们之间的距离是10px。

如果我们想取消这一现象,就可以创建一个新的BFC,将元素包含进去。

1
2
3
4
5
6
7
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="new-context">
<p>Sibling 3</p>
</div>
</div>
1
2
3
.container {background-color: blue; overflow: hidden;}
.new-context {overflow: hidden;}
p {background-color: green; margin: 10px, 0;}

这样第二个p和第三个p之间的距离就是10px + 10px = 20px。

用BFC包含浮动

在我们为元素设置浮动时,该元素会从文档流中删除,导致其包含元素的高度为0。一般通过设置clear来清除浮动,但新建BFC同样可以做到。

来看个例子:

1
2
3
4
<div class="container">
<p>Sibling</p>
<p>Sibling</p>
</div>
1
p {float: left;}

在上面的情况下,包含块的高度为0且不包含浮动的两个元素。我们通过创建一个新的BFC来解决这个问题:

1
.container {overflow: hidden}

这样浮动元素就回到了其正常文档流中,自然包含块也有了高度。

参考文章:Understanding Block Formatting Contexts in CSS

发表评论 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注

分类

  • CFC 周刊 (4)
  • CFC 技术 (29)
  • CFC 日常 (3)
  • 未分类 (15)
  • 活动通知 (3)

标签

ACM Android anime animeloop animeloop-cli APP Apple aria2 Array Blog CFC数据结构与算法训练指南 CoreData CQUT Don't Starve Hexo iBooks JavaScript macOS Matlab moeoverflow OpenCV Programming README RxJS SQLite SQLite3 Steam Swift Theme Web Xcode 主题模板 动漫 博客 反编译 妹子 循环 教程 数据库 游戏 算法 装逼 视频 重庆理工大学 饥荒

登录
©2023 CFC Studio | Powered by WordPress & Superb Themes