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 以外的值
  • 绝对定位元素,positionabsolute/fixed
  • display为以下其中之一的值inline-blocks、table-cell、flex、table-caption或者inline-flex。
  • overflow除了visible以外的值(hidden,auto,scroll)。
  • fieldset元素

BFC的特性

如果形成了BFC,就形成了一个单独的块。块和块之间不会出现干扰,所以浮动的元素块不会重叠。

下面是搜索了一些来源于网络的特性

  1. 如果这两个相邻的块框不属于同一个BFC,它们的外边距就不会叠加。(margin collopse)证实出来的结果是错误的!!!

    一般情况下,如下图所示,本应该是相隔40px,但是会发生重叠,结果出现的是盒子1的marginTop和盒子2的marginBottom里那个更大的距离:

     
    margin collopse

    如果我们给box1加上overflow:hidden,还是给box2加上overflow:hidden还是都加上,都无法解决这个问题。(不知是否是本人理解错误,目前我定它为错误)

  2. BFC边框和内部贴紧子元素不发生重叠:

一个BFC的边框不能和它里面的元素的外边距重叠,所以如果给一个挨着浮动的块级格式化上下文添加负的外边距时"不起作用"??。

除了上面相邻会出现重叠外,这种父子的情况也会出现重叠。如果不给下面这个父亲盒子加上overflow,里面的孩子就永远是紧贴着父亲的边框的,并且parent会取孩子和它自己marginTop里面最大的那个值来和test隔开。

 
margin collapse

另外这里引用写的是“margin负值不起作用”,经过测试之后发现也是错的。

  1. 盒子高度包含了浮动元素:

创建了BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素,反之亦然,同时BFC依旧属于文档中的普通流。

就是BFC内的浮动元素可以撑起这个盒子。

  1. 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的更多相关文章

  1. Block formatting context(块级格式化上下文)

    今天看到豆瓣面试官的一篇文章,讲到关于CSS中的一个知识点:Block formatting context  ,感觉这个确实挺有用,同时我也挺赞同作者的一些观点的,这里就不展开谈我的感受了, 此文只 ...

  2. 块级格式化上下文(block formatting context)

    在CSS2.1中,有三种定位方案--普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inline元素水平排列,直到行被占满后换行,block元素则被渲染为完整的一行,除非指定,所有元素 ...

  3. 【转】关于Block Formatting Context--BFC和IE的hasLayout

    转自穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为“块级格式化范围”. 是 W3C CSS ...

  4. 块级格式化上下文(block formatting context)、浮动和绝对定位的工作原理详解

    CSS的可视化格式模型中具有一个非常重要地位的概念——定位方案.定位方案用以控制元素的布局,在CSS2.1中,有三种定位方案——普通流.浮动和绝对定位: 普通流:元素按照先后位置自上而下布局,inli ...

  5. 浅入“Block Formatting Context”

    本文主要是针对BFC特性的应用,至于什么是BFC,可以参看MDN的简介: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_fo ...

  6. 关于Block Formatting Context--BFC和IE的hasLayout

    转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 一.BFC是什么? BFC(Block Formatting Context)直译为"块级格式 ...

  7. css--block formatting context

    block formatting context(块级格式化上下文) 如何产生BFC:当一个HTML元素满足下面条件的任何一点,都可以产生Block Formatting Context: float ...

  8. BFC(Box,Formatting,Context) —— 块级格式化上下文

    Box:CSS布局的基本单位 Formatting context是页面中的一块渲染区域,最常见的是BFC和IFC,CSS3增加了GFC和FFC BFC定义:块级格式化上下文,它是一个独立的渲染区域, ...

  9. css Block formatting context BFC

    w3c关于BFC解释: http://www.w3.org/TR/CSS21/visuren.html#block-formatting Mdn描述: A block formatting conte ...

  10. Block formatting context

    不会JS中的OOP,你也太菜了吧!(第一篇)   一.你必须知道的 1) 字面量 2) 原型 3) 原型链 4) 构造函数 5) 稳妥对象(没有公共属性,而且其方法也不引用this的对象.稳妥对象适合 ...

随机推荐

  1. Spring Cloud,Docker书籍资源、优秀博文等记录

    Spring Cloud,Docker书籍资源.优秀博文等记录 Spring Cloud,Docker书籍资源.优秀博文等记录 一.书籍 二.博文地址 三.思维导图Or图片 3.1一张图总结 Dock ...

  2. 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 ...

  3. hibernate+spring+tomcat启动报错Not supported by BasicDataSource

    最近使用hibernate+spring+jsp的小项目制作过程中出现一些错误,例如: java.lang.UnsupportedOperationException: Not supported b ...

  4. MacOS Big Sur开HiDPI

    我自己的环境: 开启hidpi的目的是为了让显示更加细腻,代价是缩小了显示范围. 自己在网上看了很多帖子,也尝试了几种,有些方法已经不再适合Big Sur系统了,所以本文提供一种可用的,在Big Su ...

  5. Word 脚本 (自用)

    打开开发工具 右击功能区->自定义功能区 勾选开发工具->确定 导入代码 开发工具选项卡->Visual Basic 右击Normal->插入->模块 粘贴代码-> ...

  6. 用werkzeug实现一个简单的python web框架

    使用工具 Pycharm , Navicat , WebStorm等 使用库 Werkzeug用于实现框架的底层支撑,pymysql用于实现ORM,jinja2用于模板支持,json用于返回json数 ...

  7. Codeforces Round #665 (Div. 2) D. Maximum Distributed Tree (dfs计数,树)

    题意:给你含有\(n\)个节点,\(n-1\)条边的树,以及\(m\)个质数和\(1\),你需要在这\(m\)个质数和一个\(1\)选择数(质数只能选一次,\(1\)可以多选)给\(n-1\)条边赋值 ...

  8. 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)是 ...

  9. __getattr__,__getattribute__和__get__的区别

    dir(object)  列出对象的大多数属性 getattr(object, name) 从object对象中获取name字符串指定的属性 hasattr(object, name) 如果objec ...

  10. [Golang]-3 函数、多返回值、变参、闭包、递归

    // test01 project main.go package main import ( "fmt" ) // 单返回值的函数 func plus(a int, b int) ...