BFC --- Block Formatting Context --- 块级格式化上下文
虽然知道块级格式化上下文是什么东西,但要我把这个东西给说清楚,还真的不是一件容易的事儿,所以这篇文章我就要说说清楚到底什么使传说中的BFC,即块级格式化上下文。
一、BFC的通俗理解
通俗的理解 --- 布局的时候,BFC提供了一个环境,一些HTML元素在这个环境中按照一定规则进行布局,而这个BFC提供的环境中的元素不会影响到其它环境中的布局。为了让我们有个感性的认识,举个不太合适的例子。你可以把一个BFC想象成大的集装箱,这个集装箱里装的货物就是一些HTML元素。在现实生活中为了避免不同人的货物相互混淆(代码不要乱),都是把货物包装好(一个一个的元素)再装入集装箱,这样的话无论你包装里面的货物(集装箱中的元素)怎么摆放(布局),都不会影响到其他人的货物(其他的集装箱和其中的货物)。那么这个集装箱就可以被想象成Block Formatting Context。来源
BFC的三个作用(使用Overflow: hidden;触发BFC):
- 自适应的两栏布局。 (BFC不会和float的元素重叠, 因为BFC元素不会影响到外部,所以说如果覆盖了float,实际上就是BFC在影响同级的外部元素了)
- 清楚浮动。 (父元素触发BFC,那么BFC内的float元素高度也会参与计算。因为BFC内部不能影响到外部,所以触发BFC之后会形成包裹。如果不包裹,那么显然BFC会影响外部元素的布局的。)
- 消除margin重叠。 两个div,如果在数值方向上使用了margin,则重叠;但是,如果我们使用overflow触发这两个div的BFC,那么这两个div就不会相互相应了。
核心:BFC元素不会影响外部,外部也不会影响BFC元素。
二、Formatting Context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
三、BFC定义
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
补充:
block-level box:display 属性为 block, list-item, table 的元素,会生成 block-level box。并且参与 block fomatting context;
inline-level box:display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且参与 inline formatting context;
四、 BFC的布局规则
刚刚我们已经介绍了BFC是什么,并且说BFC内部的Block-Level Box都会按照相应的规则进行布局,那么这个规则是什么呢?
1.内部的Box会在垂直方向,一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠(例子:梦想天空)
3.每个元素(所有元素)的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此(例子:梦想天空)。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时,浮动元素也参与计算(例子梦想天空)。
来源
红色部分,我认为是BFC的三大特性。
五、怎么样会触发BFC
BFC 由下列情况之一创建:
7.display: inline-block、flex都可以触发BFC、
8.overflow : hidden、auto、scrool都可以触发BFC
来源
在我的博文《深入理解margin-top》也对此有一定的介绍, 主要是用于解决margin-top的塌陷问题。
六、BFC的作用和原理
1. 自适应两栏布局
2. 清楚内部浮动
这一部分就看梦想天空的博文吧! 讲的是在太好,是我模仿不来的啊~
链接到原文
七、更详细的解释。
我们知道BFC,即Block Formatting Context,即块级格式化上下文,它会独立渲染一个元素, 这个BFC里的元素按照一定的规则排列,BFC内部的元素不会影响到外部的元素,外部的元素也不会影响到内部的元素。
比如,我们两个div,分别设置高度和宽度,按照文档流的规则,一定是换行的形式,上下排列的,但是,如果我们把上面的div的float属性设置为float: left; 那么下面的div就会向上移动,并且float在上面覆盖。
如果我们在上面的div外层再添加一个div,并把这个div添加属性 overflow: hidden; 这时候就会触发外层div的BFC,根据BFC的计算高度要包括内部的float元素的高度,这时就可以清除浮动了。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>block formatting context</title><style>div.wrap {overflow: hidden;}div.first {float: left; width: 300px;height: 300px;background: red;}div.second {width: 500px;height: 400px;background: pink;}</style> </head> <body><div class="wrap"><div class="first"></div></div><div class="second"></div> </body> </html>
注意: overflow共有5个值,分别是 hidden、 scroll、 visible、inherit、 auto,其中除了 visible和inherit,其他的几个值都可以触发 BFC。
转载于:https://www.cnblogs.com/zhuzhenwei918/p/6540550.html
BFC --- Block Formatting Context --- 块级格式化上下文相关推荐
- 点击箭头 切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具 移动工具 移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具 快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具 放大镜工具可 ...
- Block Formatting Contexts(块级格式化上下文)
前几天看到kejun's blog里面的一篇文章:"近期面试感受", 里面提到面试时的一道题的不同的解决方案,比较它们之间的优缺点,其中出现了一个概念:Block Formatti ...
- 对 BFC 规范(块级格式化上下文:block formatting context)的理解?
相关知识点: 块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成块级盒 子的区域,也是浮动元素与其他元素的交互限定区域. ...
- 常规流之块级格式化上下文(Block Formatting Contexts)
在css2.1中,常规流包括块框(block boxes)的块格式化(block formatting),行内框(inline boxes)的行内格式化(inline formatting),块级框( ...
- 块级格式化上下文(Block Formatting Context)
前言 在 CSS 2.1 中,有三种定位方案--普通流 (Normal Flow) .浮动 (Floats) 和绝对定位 (Absolute Positioning) ,下面分别对这三种布局简略说明一 ...
- CSS中块级格式化上下文(BFC)的特性与应用
一.何为BFC 块级格式化上下文(Block Formatting Context)是网页CSS视觉渲染的一部分,并用于决定盒子的布局.在定位体系中属于常规流(Normal Flow)(另外两种定位体 ...
- 关于对CSS中BFC (块级格式化上下文) 的理解
转自: https://www.thinktxt.com/web-front/2017/02/18/css-bfc-layout-model.html 也许你已经掌握了HTML.CSS的基本布局技能, ...
- BFC(块级格式化上下文)【面试】
BFC(块级格式化上下文) 块级格式化上下⽂,是⼀个独⽴的渲染区域,让处于 BFC 内部的元素与外部 的元素相互隔离,使内外元素的定位不会相互影响. IE下为 Layout ,可通过 zoom:1 触 ...
- css三大特性权重计算BFC(块级格式化上下文)盒子模型
系列文章目录 文章目录 系列文章目录 前言 一.css三大特性 1.继承性 2.层叠性 3.优先级 二.权重计算 1.引入库 2.读入数据 三.BFC(块级格式化上下文) 1.引入库 2.读入数据 总 ...
- BFC(Block Formatting Context) 及其如何工作
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能. 大家好,我是IT修真院北京分院 ...
最新文章
- git简介及使用方法
- sap 与 sap business one 和国内软件的比较
- 大连大学计算机科学与技术考研真题,2016年大连大学计算机科学与技术数据库系统原理复试笔试最后押题五套卷...
- 【OSGI】4.实战OSGI-翻译助手项目02
- NYOJ 229 工程 二分+dp检验
- 用cisco命令确定和跟踪DOS***源
- Mac OSX中memcached安装测试
- c3p0 0.9.1.2 配套mysql_连接数据库,使用c3p0技术连接MySQL数据库
- LeetCode 737. 句子相似性 II(并查集)
- poj3190 区间贪心 挑战程序设计竞赛
- c语言fltk图形库,c-free-C/C++集成开发环境-c-free下载 v5.0官方版-完美下载
- ALS推荐算法学习总结
- 用matlab求雅可比迭代法,基于matlab的jacobi(雅可比)迭代法求解线性方程组
- [leetcode]Majority Element II
- android自定义相机打开闪光灯,Android 照相机(闪光灯,切换摄像头)
- asp.net 调用word的DCOM组件遇见各种问题之乱弹琴
- workbench应力应变曲线_workbench ansys 每个时刻的应力应变变形云图 如何查看?
- 美术网络计算机培训总结,【推荐】网络培训心得体会四篇
- 悬镜安全与小佑科技达成战略合作,打造DevSecOps云原生安全技术创新生态
- 部分mp4视频在ios上无法播放问题
热门文章
- antd-pro1.0使用jest对react组件进行单元测试
- 简单的时间间隔调度任务
- Java的值类型(基本类型)和引用类型
- Xshell下载和连接Linux
- [WebAPI] - 使用 Ajax 提交 HTML Form Data 到 WebAPI 的方法
- vue $slot基本用法
- 【Oracle】等待事件详细内容
- 【Android Developers Training】 1. 创建一个Android项目工程
- Word2003和2007如何隐藏去掉回车符
- P3211 [HNOI2011]XOR和路径