文档章节

了解 BFC

小草先森
 小草先森
发布于 01/23 16:52
字数 830
阅读 14
收藏 0

概念

MDN中的定义

块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器所没有的一些特性。通俗一点来讲,可以把 BFC 理解为一个封闭的盒子,盒子内部的元素无论如何排列,都不会影响到盒子外部其他的容器。

如何创建BFC

  • 根元素或包含根元素的元素
  • 浮动元素(元素的 float 不是 none)
  • 绝对定位元素(元素的 position 为 absolute 或 fixed)
  • 行内块元素(元素的 display 为 inline-block)
  • 表格单元格(元素的 display为 table-cell,HTML表格单元格默认为该值)
  • 表格标题(元素的 display 为 table-caption,HTML表格标题默认为该值)
  • 匿名表格单元格元素(元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group(分别是HTML table、row、tbody、thead、tfoot的默认属性)或 inline-table)
  • overflow 值不为 visible 的块元素
  • display 值为 flow-root 的元素
  • contain 值为 layout、content或 strict 的元素
  • 弹性元素(display为 flex 或 inline-flex元素的直接子元素)
  • 网格元素(display为 grid 或 inline-grid 元素的直接子元素)
  • 多列容器(元素的 column-count 或 column-width 不为 auto,包括 column-count 为 1)
  • column-span 为 all 的元素始终会创建一个新的BFC,即使该元素没有包裹在一个多列容器中

BFC的特性及应用

同一个BFC下垂直边距会发生折叠

<style>
	div{
		width: 100px;
		height: 100px;
		background: green;
		margin: 100px;
	}
</style>
<div></div>
<div></div>

从效果上看,因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠,所以两个盒子之间距离只有 100px,而不是 200px。首先这不是 CSS 的 bug,我们可以理解为一种规范,如果想要避免外边距的重叠,可以将其放在不同的 BFC 容器中。

<style>
	.out{overflow: hidden;}
	.in{
		width: 100px;
		height: 100px;
		background: green;
		margin: 100px;
	}
</style>
<div class="out">
	<div class="in"></div>
</div>
<div class="out">
	<div class="in"></div>
</div>

BFC可以包含浮动的元素(清除浮动)

浮动的元素会脱离文档流,如下示例:

<div style="border: 1px solid red;">
    <div style="width: 100px;height: 100px;background: green;float: left;"></div>
</div>

我们可以使用将外层div创建为BFC,使其包含里层浮动元素,达到清除浮动的作用,当然,你也可以使用css clear属性来清浮动。如何创建BFC,可以参考上文所提到过的一些方法,这里我们通过给外层div设置overflow:hidden来创建一个BFC

<div style="border: 1px solid red;overflow: hidden;">
    <div style="width: 100px;height: 100px;background: green;float: left;"></div>
</div>

© 著作权归作者所有

共有 人打赏支持
小草先森
粉丝 16
博文 54
码字总数 37836
作品 0
武汉
私信 提问
CSS中关于定位及BFC中的易错点

说起BFC,就必须先了解一下CSS文档流中的定位机制,而且这部分说简单也简单,但却有个坑有可能误导我们,特在本文作出解释。 一、文档流中的定位机制 1. 三种基本方式 CSS有三种基本定位机制...

_呜啦啦啦火车笛
02/01
0
0
[布局概念] 关于CSS-BFC深入理解

写在前面 好记性不如烂笔头,研究了一下BFC,发现里面比较细的东西也是很多的!关于BFC,很多人可能都听说过BFC这个东西,大概知道这是个啥东西,相信很多人对此并没有一个非常细致的了解,本...

OB丶Koro1
2017/05/04
0
0
CSS布局模型 之 浮动模型(浮动的工作原理和清除浮动技巧?)

浮动的工作原理 浮动是让某元素脱离文档流,在浮动框之前和之后的非定位元素会当它不存在一样,可能沿着它的另一侧垂直流动,但都为其腾出空间,块级元素也不例外(被浮动元素占据了部分行空...

艺晨光
2017/08/22
0
0
暴风播控云遭疯抢,你们care的BFC积分暴风高管表示并不care

迅雷玩客云的争议还未散去,暴风却紧跟脚步推出了播控云。雷锋网AI金融评论报道,12月8日,一款名为“暴风播控云”的产品在bfc.baofeng.com上线,官方宣称首批2000台在5分钟内被一抢而空。 ...

张晨麟
2017/12/14
0
0
不定期更新的CSS奇淫技巧(二)

拖更很久,各位小哥哥、小姐姐别介意,今天本来会死在襁褓(草稿待了一个月)中的 不定期更新的CSS奇淫技巧(二)终于出来了,本文可能会水份居多,如有问题欢迎提议我会逐步榨干它 七、CSS...

小小茂茂
2018/08/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

一线互联网技术推荐:Java工程师架构知识系统化汇总,面完45K!

根据高端招聘平台100 offer发布的Java人才盘点报告,在过去的2018年,Java仍然是最流行、招聘供需量最大的技术语言。 在此基础上,互联网行业针对 Java 开发的招聘需求,也是近年技术类岗位供...

java知识分子
11分钟前
0
0
JAVA并发编程JUC基础学习(简介)

之前写过一篇并发编程的简单实例应用,Future快速实现并发编程,可以很快的在自己的项目中应用,但并不系统,之前说过总结一篇(或者一系列)java.util.concurrent 这个并发编程工具类的学习...

小海bug
14分钟前
0
0
matlab-线性代数 齐次方程组 判断是否有无穷多解

  matlab : R2018a 64bit     OS : Windows 10 x64 typesetting : Markdown    blog : my.oschina.net/zhichengjiu    gitee : gitee.com/zhichengjiu   code clearclc% x1+2*......

志成就
14分钟前
0
0
简单描述PHP发展历程

PHP简介 PHP(外文名:PHP: Hypertext Preprocessor,中文名:“超文本预处理器”)是一种通用开源脚本语言。语法吸收了C语言、Java和Perl的特点,利于学习,使用广泛,主要适用于Web开发领域...

问题终结者
23分钟前
0
0
结构体指针需要初始化

过年过的大脑已经瓦特了。 #include <stdio.h>#define N 10#define MAXSIZE 100typedef struct {int r[MAXSIZE+1];/* 用于存储要排序数组 */ int length;/* 用于记录顺序表的...

niithub
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部