• 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. Spring框架的基本使用(IOC部分)

    Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架. Spring的好处 1.方便解耦,简化开发: Spring就是一个大工厂,专门负责生成Bean,可以将所有对象创建和依赖关 ...

  2. Codeforces 580D Kefa and Dishes(状态压缩DP)

    题目链接:http://codeforces.com/problemset/problem/580/D 题目大意:有n盘菜每个菜都有一个满意度,k个规则,每个规则由x y c组成,表示如果再y之前吃x ...

  3. 可怕的线程上下文类装载器(TCCL)

    在明天的 OSGi 2012 社区活动上,我将以"如何使你的类库在不依赖 OSGi 的情况下进行友好地 OSGi"为主题进行演讲.在演讲中我将会提及 Java 的线程上下文类加载器 ...

  4. tidb 记录文档

    ansible-playbook stop.yml   / start.yml 重启集群,在ansible目录下执行 SHOW STATS_META; 查看统计信息 重启集群:ansible-play ...

  5. Java学习(异常类)

    一.什么是异常: 异常就是在运行时产生的问题.通常用Exception描述. 在java中,把异常封装成了一个类,当出现问题时,就会创建异常类对象并抛出异常相关的信息(如详细信息,名称以及异常所处的位 ...

  6. java 基础类库之 SysFun

    /** * 将对象转为字符串:为空,则返回空字符串:而不是"null" * @param pObj 为空,则返回空字符串 * @return */ public static St ...

  7. 【AtCoder】AGC011 D - Half Reflector

    题解 大意是n个管子排成一排,每个管子有两种状态,A状态是从某个方向进去,从原方向出来,B状态是从某个方向进去,从另一个方向出来 球经过一个A状态的管子这个管子会立刻变成B状态,经过一个B状态的管子会 ...

  8. 成功实施的APS项目故事分享---如何管理与激励APS项目团队

    故事背景 A企业是易普优APS重要客户之一,是某行业的龙头企业:APS项目历时7个月顺利上线,十个月验收!通过易普优APS的顺利实施,建成了集团的精益计划管控运营平台,树立计划的权威与指挥棒作用,让物 ...

  9. sql结合通配符来自定义转义字符

    1.使用   ESCAPE   关键字,定义转义符.在模式中,当转义符置于通配符之前时,该通配符就解释为普通字符.例如,要搜索在任意位置包含字符串   5%   的字符串,请使用:      WHER ...

  10. 2015 icpc北京赛区 D 最小割

    题目大意:给你一棵技能树,如果要学习一个技能,那么它之前的技能要全部学完,第 i 个点需要ai 能学习 每条边有一个消耗c 如果支付c那么就能去掉这条边, 你还可以kejin 花费di 就能直接学习 ...