块格式化上下文(Block Formatting Context,BFC)
块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
下列方式会创建块格式化上下文:
- 根元素或包含根元素的元素
- 浮动元素(元素的
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,即使该元素没有包裹在一个多列容器中(标准变更,Chrome bug)。
块格式化上下文包含创建它的元素内部的所有内容.
块格式化上下文对浮动定位(参见 float
)与清除浮动(参见 clear
)都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠(Margin collapsing)也只会发生在属于同一BFC的块级元素之间。
以上是MDN关于BFC的定义,看完还是觉得BFC的概念很抽象。
什么是BFC?
BFC是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
如何创建BFC?
- 浮动元素(元素的
float
不是none
) - 绝对定位元素(元素的
position
为absolute
或fixed
) - 行内块元素(元素的
display
为inline-block
) overflow
值不为visible
的块元素- ……
- 更多创建条件详见MDN
只要满足以上条件之一就行。
BFC有什么用?
1.让浮动内容和周围的内容等高(BFC包含浮动)
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
} .float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
从效果图中我们可以看出,浮动的元素比它旁边的元素高,所以浮动的<div>的边框穿出了浮动,浮动脱离了文档流。
.box {
background-color: rgb(224, 206, 247);
border: 5px solid rebeccapurple;
overflow: auto;
} .float {
float: left;
width: 200px;
height: 150px;
background-color: white;
border:1px solid black;
padding: 10px;
}
<div class="box">
<div class="float">I am a floated box!</div>
<p>I am content inside the container.</p>
</div>
创建一个会包含这个浮动的BFC,通常的做法是设置父元素 overflow: auto
或者设置其他的非默认的 overflow: visible
的值。
2.利用BFC避免外边距折叠
3.使用BFC避免文字环绕
4.在多列布局中使用BFC
如果我们创建一个占满整个容器宽度的多列布局,在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC,它将总是占据其他列先占位完毕后剩下的空间。
参考资料:什么是BFC
块格式化上下文(Block Formatting Context,BFC)的更多相关文章
- 块级格式化上下文(block formatting context)
在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
- css Block formatting context BFC
w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...
- [转]学习块格式化上下文(BlockFormattingContext)
原文:https://www.cnblogs.com/elcarim5efil/p/4745796.html 格式化上下文 格式化上下文( formatting contexts )├── 块级格 ...
- 【转】关于Block Formatting Context--BFC和IE的hasLayout
转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...
- 关于Block Formatting Context--BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
- 关于Block Formatting Context--BFC和IE的hasLayout(转)
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. ...
- 学习块格式化上下文(BlockFormattingContext)
什么是BFC BFC全称是Block Formatting Context,即块格式化上下文.它是CSS2.1规范定义的,关于CSS渲染定位的一个概念.要明白BFC到底是什么,首先来看看什么是视觉格式 ...
- BFC --- Block Formatting Context --- 块级格式化上下文
虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文. 一.BFC的通俗理解 通俗的理解 -- ...
随机推荐
- day25 多继承、接口、抽象类、鸭子类型
今日内容: 如何查看对象的名称空间及对象名 继承的另一种使用 单继承与多继承 经典类与新式类 mro列表 菱形继承 接口 抽象类 鸭子类型 1.查看名称空间包含的变量: 使用类或对象名.__dict_ ...
- shell sed 替代1
sed -e '/-DLUA_USE_LINUX/s/-lreadline/-lreadline -lncurses/g' Makefile > tmp mv tmp Makefile 全局换- ...
- IE浏览器的脚本文本框监听事件
一.IE8的文本框监听事件 由于在IE8所以input和propertychange都不能用,终于皇天不负有心人让我找到了这个:https://github.com/sophiebits/jquery ...
- Codeforces Round #574 (Div. 2)补题
A. Drinks Choosing 统计每种酒有多少人偏爱他们. ki 为每种酒的偏爱人数. 输出ans = (n + 1)/2 > Σki / 2 ? (n + 1)/2 - Σki / ...
- MFC使用ado连接SQLserver
https://blog.csdn.net/GK_2014/article/details/50530103
- h5中的分组元素figure、figcaption、hgroup元素介绍
分组元素用于对页面中的内容进行分组. figure元素和figcaption元素 figure元素用于定义独立的流内容(图像.图表.照片.代码等),一般指一个独立的单元.figure元素的内容应该与主 ...
- Elastic Search中DSL Query的常见语法
Query DSL是一种通过request body提交搜索参数的请求方式.就是将请求头参数(?xxx=xxx)转换为请求体参数.语法格式:GET [/index_name/type_name]/_s ...
- vue使用axios进行ajax请求
以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...
- Codeforces Round #309 (Div. 1)
A. Kyoya and Colored Balls 大意: 给定$k$种颜色的球, 第$i$种颜色有$c_i$个, 一个合法的排列方案满足最后一个第$i$种球的下一个球为第$i+1$种球, 求合法方 ...
- Java lesson16homework
package lesson16; /** * 1. 随机生成4个0到9的整数,组成一个序列(使用LinkedList<Integer>存储) 例如:3 6 4 4 2. 然后要求用 ...