• CSS之BFC、IFC、FFC and GFC
    • 什么是FC?
    • BFC(Block Formatting Contexts)
      • BFC的布局规则:
      • 如何生成BFC:
    • IFC(Inline Formatting Contexts)
    • FFC(Flex Formatting Contexts)
    • GFC(GridLayout Formatting Contexts)

什么是FC?

  • FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

BFC(Block Formatting Contexts)

  • 意为“块级格式化上下文”。就是页面上的一个渲染区域,容器内的子元素不会对外面的元素布局产生影响,反之亦然。

BFC的布局规则:

  1. 内部的盒子会在垂直方向,一个个地放置
  2. 盒子垂直方向的距离由margin决定,属于同一个BFC的两个相邻Box的上下margin会发生重叠
  3. 每个元素的左边,与包含的盒子的左边相接触,即使存在浮动也是如此
  4. BFC的区域不会与float重叠
  5. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之也如此
  6. 计算BFC的高度时,浮动元素也参与计算

如何生成BFC:

  1. 根元素或其它包含它的元素
  2. float的值不为none
  3. overflow的值不为visible
  4. position的值不为relative和static
  5. display的值为table-cell,table-caption和inline-block中的任何一个
  • 一个块格式化上下文包括创建它的元素内部所有内容,除了被包含于创建新的块级格式化上下文的后代元素内的元素。
  • 块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。浮动不会影响其它块格式化上下文中元素的布局,并且清除浮动只能清除同一块格式化上下文中在它前面的元素的浮动。

IFC(Inline Formatting Contexts)

  • 意为“内联格式化上下文”,IFC中,盒子依次水平放置,从包含块的顶部开始

FFC(Flex Formatting Contexts)

  • 意为“自适应格式化上下文”,display值为flex或者inline-flex的元素将会生成自适应容器。flex box由伸缩容器和伸缩子元素组成。通过设置元素display:flex/inline-flex可以得到伸缩容器,前者为块级元素,后者为行内元素。伸缩容器外元素不受影响。

GFC(GridLayout Formatting Contexts)

  • 意为“网格布局格式化上下文”当一个元素设置为display:grid的时候,此元素将获得一个独立的渲染区域,可以在网格容器上定义网格行和列,为每一个网格定义位置和空间。GFC和table的区别在于GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染。

CSS之BFC、IFC、FFC and GFC的更多相关文章

  1. 你知道BFC、IFC、FFC、GFC及多栏自适应布局吗?

    FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出 ...

  2. CSS中的IFC和BFC入门

    CSS中的IFC和BFC入门   提到CSS,首先会想到的就是盒模型,如果对于盒模型不是很理解的,看这里.这是一个基础的系列,看了盒模型还可以看看box-sizing,好了不多说了,下面介绍今天的重点 ...

  3. CSS 中的 BFC,IFC,GFC和FFC

    原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html What‘s FC? 一定不是KFC,FC的全称是:Formatting Conte ...

  4. css3中的BFC,IFC,GFC和FFC(转载)

    作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html   What‘s FC? 一定不是KFC,FC的全称是:Formatting C ...

  5. css3中的BFC,IFC,GFC和FFC

    出处:https://www.jianshu.com/p/e75f351e11f8 表格比较: 名称 英文全称 含义 BFC Block Formatting Contexts 块级格式化上下文 IF ...

  6. BFC,IFC,GFC,FFC

    FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. ...

  7. 跟着9张思维导图学习Javascript js 关键字和保留字 css3中的BFC,IFC,GFC和FFC

    跟着9张思维导图学习Javascript   学习的道路就是要不断的总结归纳,好记性不如烂笔头,so,下面将 po 出我收集的 9 张 javascript 相关的思维导图(非原创). 思维导图小ti ...

  8. BFC、IFC、FFC、GFC

    FC(Formatting Context) 它是W3C CSS2.1规范中的一个概念,定义的是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. ...

  9. CSS布局秘籍(1)-任督二脉BFC/IFC

    01.CSS布局 1.1.正常布局流(Normal flow) 正常布局流 就是不做任何布局控制,按照HTML的顺序(从左到右,从上而下)进行布局排列.网页基于盒子模型进行正常的布局,主要特点: 盒子 ...

随机推荐

  1. javaweb作业一

    作业:Http全称叫什么?有什么特点?端口号是多少?超文本传输协议:(1)遵循请求/响应模型(2)http协议是一种无状态协议,请求/响应完成后,连接会断开.这时,服务器无法知道当前访问的用户是否是老 ...

  2. (二)HtmlUnit 使用

    第一节: htmlunit 模拟浏览器请求 第二节: htmlunit 获取指定元素 第三节: htmlunit 使用代理 IP 第四节: htmlunit 取消 css,javascript 支持 ...

  3. GreenPlum学习笔记:create table创建表

    二维表同样是GP中重要的存储数据对象,为了更好的支持数据仓库海量数据的访问,GP的表可以分成: 面向行存储的普通堆积表 面向列存储的AOT表(append only table) 当然AOT表也可以是 ...

  4. HBase混布MapReduce集群学习记录

    一.准备工作 1.1 部署环境 集群规模大概260多台,TSC10机型,机型参数如下: > 1个8核CPU(E5-2620v4) > 64G内存 > HBA,12*4T SATA,1 ...

  5. python类、类继承

    yield: 简单地讲,yield 的作用就是把一个函数变成一个 generator,带有 yield 的函数不再是一个普通函数,Python 解释器会将其视为一个 generator,调用 fab( ...

  6. **CodeIgniter-cURL扩展

    Work with cURL easily from your CodeIgniter application. Tweet Contributor : philsturgeon Email : Lo ...

  7. MongoDB查询用法大全

    转载 http://blog.163.com/lgh_2002/blog/static/440175262012052116455/ 详见官方的手册: http://www.mongodb.org/d ...

  8. C#中ASCII码与字符串的互换

    主要代码: int a = (int)'a';// 把字符直接转换为int类型,即可得到ASCII码值 ).ToString();// 将数字直接转换为char类型,即可得到ASCII码对应的字符 C ...

  9. 结合Python代码介绍音符起始点检测 (onset detection)

    本文由 meelo 原创,请务必以链接形式注明 本文地址 音符起始点检测介绍 音符起始点检测(onset detection)是音乐信号处理中非常重要的一个算法.节拍和速度(tempo)的检测都会基于 ...

  10. Hadoop案例(十)WordCount

    WordCount案例 需求1:统计一堆文件中单词出现的个数(WordCount案例) 0)需求:在一堆给定的文本文件中统计输出每一个单词出现的总次数 1)数据准备:Hello.txt hello w ...