关于各种Formatting context
Formatting context
我们把网页看作是由很多个盒子组成的,而这些盒子的展示方式,就是由display这个属性来决定的。
这里出现了一个概念,叫做Formatting context(格式上下文):
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域,有一套渲染规则决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
Formatting context的种类
- Block fomatting context (BFC):块级格式化上下文
- Inline formatting context (IFC):行内格式化上下文
- Flex formatting context(FFC):CSS3中的flex布局
- Grid formatting context(GFC):CSS3中的Grid布局
BFC
接触的缘由?
相信很多人了解到BFC这个概念,都是因为在思考为什么这样做可以“清除浮动”而搜索到了和BFC有关的结果。那么我们先来拓展一下:
Q:浮动的时候,文字是不会重叠的,为什么?
来源于网络的答案:
使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。
Q:为什么用clear属性可以清除浮动?
首先有一个前提,clear属性只能赋给块级元素才可能会有效果。
然后来自MDN:
- 当应用于不浮动的块时,它将这个块的边框边界移动到所有相关浮动元素外边界的下方。这个行为作用时会导致margin collapsing不起作用。
- 当应用于浮动元素时,它将元素的外边界移动到所有相关的浮动元素外边界的下方。这会影响后面的浮动元素的位置无法高于它之前的元素。
另外一种最常用的就是使用overflow:hidden来进行清除浮动,而它的原理就和BFC有关。
触发BFC的条件
- 浮动元素,float 除 none 以外的值
- 绝对定位元素,
position
为absolute
/fixed
。 display
为以下其中之一的值inline-blocks、
table-cell、
flex、table-caption或者inline-flex。overflow
除了visible
以外的值(hidden,auto,scroll)。fieldset
元素
BFC的特性
如果形成了BFC,就形成了一个单独的块。块和块之间不会出现干扰,所以浮动的元素块不会重叠。
下面是搜索了一些来源于网络的特性:
如果这两个相邻的块框不属于同一个BFC,它们的外边距就不会叠加。(margin collopse)证实出来的结果是错误的!!!
一般情况下,如下图所示,本应该是相隔40px,但是会发生重叠,结果出现的是盒子1的marginTop和盒子2的marginBottom里那个更大的距离:margin collopse如果我们给box1加上overflow:hidden,还是给box2加上overflow:hidden还是都加上,都无法解决这个问题。(不知是否是本人理解错误,目前我定它为错误)
BFC边框和内部贴紧子元素不发生重叠:
一个BFC的边框不能和它里面的元素的外边距重叠,所以如果给一个挨着浮动的块级格式化上下文添加负的外边距时"不起作用"??。
除了上面相邻会出现重叠外,这种父子的情况也会出现重叠。如果不给下面这个父亲盒子加上overflow,里面的孩子就永远是紧贴着父亲的边框的,并且parent会取孩子和它自己marginTop里面最大的那个值来和test隔开。
另外这里引用写的是“margin负值不起作用”,经过测试之后发现也是错的。
- 盒子高度包含了浮动元素:
创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC依旧属于文档中的普通流。
就是BFC内的浮动元素可以撑起这个盒子。
- BFC的区域不会与float box重叠:
也就是如果两个盒子黏在一起,一个是BFC一个是float(话说,float不也是BFC么=_=)这个时候它们不会重叠。
拓展:hasLayout
使用 *zoom: 1 的属性,这是一个IEhack, 因为 IE6-7 并不支持 W3C 的 BFC ,而是使用私有属性 hasLayout 。
从表现上说,hasLayout 跟 BFC 很相似。 hasLayout 自身存在很多问题,导致了IE6-7 中一系列的 bug。
FFC
触发FFC的条件
- display: flex;
- display: inline-flex;
与BFC的不同
以下来源于网络:
- Flexbox 不支持 ::first-line 和 ::first-letter 这两种伪元素
- vertical-align 对 Flexbox 中的子元素 是没有效果的
- float 和 clear 属性对 Flexbox 中的子元素是没有效果的,也不会使子元素脱离文档流(但是对Flexbox本身是有效果的!)
- 多栏布局(column-*) 在 Flexbox 中也是失效的,就是说我们不能使用多栏布局在Flexbox 排列其下的子元素
- Flexbox 下的子元素不会继承父级容器的宽
关于各种Formatting context的更多相关文章
- Block formatting context(块级格式化上下文)
今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只 ...
- 块级格式化上下文(block formatting context)
在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...
- 【转】关于Block Formatting Context--BFC和IE的hasLayout
转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...
- 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解
CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...
- 浅入“Block Formatting Context”
本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_fo ...
- 关于Block Formatting Context--BFC和IE的hasLayout
转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...
- css--block formatting context
block formatting context(块级格式化上下文) 如何产生BFC:当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context: float ...
- BFC(Box,Formatting,Context) —— 块级格式化上下文
Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...
- css Block formatting context BFC
w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...
- Block formatting context
不会JS中的OOP,你也太菜了吧!(第一篇) 一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合 ...
随机推荐
- Spring Cloud,Docker书籍资源、优秀博文等记录
Spring Cloud,Docker书籍资源.优秀博文等记录 Spring Cloud,Docker书籍资源.优秀博文等记录 一.书籍 二.博文地址 三.思维导图Or图片 3.1一张图总结 Dock ...
- orm(Manager isn't accessible via %s instances" % cls.__name)报错
报错信息 Manager isn't accessible via %s instances" % cls.__name 解决方法 https://www.jianshu.com/p/5e0 ...
- hibernate+spring+tomcat启动报错Not supported by BasicDataSource
最近使用hibernate+spring+jsp的小项目制作过程中出现一些错误,例如: java.lang.UnsupportedOperationException: Not supported b ...
- MacOS Big Sur开HiDPI
我自己的环境: 开启hidpi的目的是为了让显示更加细腻,代价是缩小了显示范围. 自己在网上看了很多帖子,也尝试了几种,有些方法已经不再适合Big Sur系统了,所以本文提供一种可用的,在Big Su ...
- Word 脚本 (自用)
打开开发工具 右击功能区->自定义功能区 勾选开发工具->确定 导入代码 开发工具选项卡->Visual Basic 右击Normal->插入->模块 粘贴代码-> ...
- 用werkzeug实现一个简单的python web框架
使用工具 Pycharm , Navicat , WebStorm等 使用库 Werkzeug用于实现框架的底层支撑,pymysql用于实现ORM,jinja2用于模板支持,json用于返回json数 ...
- Codeforces Round #665 (Div. 2) D. Maximum Distributed Tree (dfs计数,树)
题意:给你含有\(n\)个节点,\(n-1\)条边的树,以及\(m\)个质数和\(1\),你需要在这\(m\)个质数和一个\(1\)选择数(质数只能选一次,\(1\)可以多选)给\(n-1\)条边赋值 ...
- Codeforces Round #651 (Div. 2) A Maximum GCD、B GCD Compression、C Number Game、D Odd-Even Subsequence
A. Maximum GCD 题意: t组输入,然后输入一个n,让你在区间[1,n]之间找出来两个不相等的数a,b.求出来gcd(a,b)(也就是a,b最大公约数).让你求出来最大的gcd(a,b)是 ...
- __getattr__,__getattribute__和__get__的区别
dir(object) 列出对象的大多数属性 getattr(object, name) 从object对象中获取name字符串指定的属性 hasattr(object, name) 如果objec ...
- [Golang]-3 函数、多返回值、变参、闭包、递归
// test01 project main.go package main import ( "fmt" ) // 单返回值的函数 func plus(a int, b int) ...