重拾 BFC、IFC、GFC、FFC

温故知新，巩固基础

从 FC 开始

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

常见的FC有：BFC(Block Formatting Context | 块级格式化上下文)和IFC(Inline Formatting Context | 行内格式化上下文)。

其次还有：GFC(GridLayout Formatting Context | 网格布局格式化上下文)、FFC(Flex Formatting Context | 自适应格式化上下文)。

参与者

一个页面由很多个盒子组成，在普通流中的盒子会参与一种格式化上下文，这个盒子可能是块盒也可能是行内盒，但不可能是块盒又是行内盒。元素的类型和display属性决定了这个盒子的类型，不同类型的盒子，会参与不同的格式化上下文，块级盒参与块级格式化上下文（BFC）,行内盒参与行级格式化上下文（IFC）。

BFC

布局规则

  1. 内部的盒子会在垂直方向，一个接一个地放置。
  2. 盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠。
  3. 每个元素的左外边缘（margin-left）,与包含块的左边想接触（对于从左往右的格式化，否则相反）。即使存在浮动也是如此，除非这个元素自己形成了一个新的BFC。
  4. BFC的区域不会与float盒子重叠。
  5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
  6. 计算BFC的高度时，浮动元素也参与计算。

如何形成（触发）？

只要元素满足下面任一条件即可。

  1. body 根元素
  2. 浮动元素：float 不为 none 的属性值
  3. 定位元素：positin 为 absolute、fixed
  4. display：inline-block、table-cell、table-caption、flex、inline-flex
  5. overflow：不为 visibility

BFC用处

  1. 清除浮动
<div class="wrap">
    <section>1</section>
    <section>2</section>
</div>
.wrap {
    width: 250px;
    border: 1px solid #000;
}
section {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
}

效果：

由于子元素都是浮动的，受浮动影响，父元素的高度塌陷了，不能根据子元素的高度自动撑开。

解决方案：为.wrap加上overflow:hidden;，使其形成BFC。根据BFC规则第6条，计算高度时会计算 float 元素的高度，达到清除浮动影响的效果。

  1. 自适应两栏布局
<div>
    <aside></aside>
    <main>黑云压城城欲摧，甲光向日金鳞开。角声满天秋色里，塞上燕脂凝夜紫。</main>
</div>
div { width: 200px; background: #eee; }
aside {
  float: left;
  width: 100px;
  height: 50px;
  background-color: aqua;
}
main {
  background-color: magenta;
}

效果：

由于左侧浮动，且高度没有外层盒子高，右侧内容的一部分跑到了左侧元素的下方。

解决方案：为main设置overflow:hidden;，触发 main 元素的 BFC ，根据规则的第4、5条，BFC 的区域是独立的，不会与页面其他元素相互影响，且不会与 float 元素重叠，因此可以形成两列自适应布局。

  1. 防止垂直 margin 合并
<section class="s top">top</section>
<section class="s bottom">bottom</section>
section {
  background-color: lime;
  width: 100px;
  height: 50px;
}
.top {
  margin-bottom: 50px;
}
.bottom {
  margin-top: 50px;
}

效果：

代码中.top和.bottom的间距加起来有 100px 的 margin 值，但是从页面上只能看到 50px。这是由于它们的外边距相遇发生了合并。

解决方案：为其中的一个元素的外面包裹一层元素，并将这个外层元素设置overflow:hidden;，使其形成BFC。因为 BFC 内部是一个独立的容器，不会与外部相互影响，从而防止 margin 合并。

  • 父子边距重叠
<section class="box">
  <article class="child"></article>
</section>
.box {
  background: #f00;
}
.child{
  height: 100px;
  margin-top: 50px;
  background: yellow
}

效果：

代码中.child有一个margin-top: 50px;，但是从页面上没有显示出来。这是由于父子上边距重叠了。

解决方案：将外层元素设置overflow:hidden;，使其形成BFC。因为 BFC 内部是一个独立的容器，不会与外部相互影响，从而防止 margin 合并。

IFC

IFC布局规则

  1. 在 IFC 中，盒子一个接一个地水平排列，起点是包含盒子的顶部。
  2. 在摆放这些盒子时，水平方向上的margin、border、padding在盒子之间得到保留，是有效的，可以通过设置行框的text-align属性改变水平对齐方式。
    在垂直方向上，这些盒子可能会以不同的形式来对齐，它们的顶部或底部对齐，或根据其中文字的基线对齐，可以通过vertical-align属性设置垂直对齐方式。
  3. 包含盒子的外层区域，会形成一行，叫做行框。行框的宽度：由包含盒子和存在浮动来决定；行框的高度：由包含元素中最高的实际高度计算而来（不受到垂直方向的 padding、margin 影响）。
  4. IFC 中不可能有块级元素，当插入块级元素时，如p 中插入 div，会产生两个匿名块与 div 分隔开，即产生两个 IFC,每个 IFC 对外表现为块级元素，与 div 垂直排列。

IFC用处

  1. p不能插入div
<p> p1 <div>div</div> p2 </p>

效果:

  1. 水平居中
    当一个块要在行框中水平居中时， 通过设置其为inline-block在外层产生 IFC，再通过text-align：center;，便可以使其水平居中。
  2. 垂直居中
    当一个块要在行框中垂直居中时，设置其vertical-align:middle;，则其他行内元素可以在此父元素下垂直居中。

主要影响IFC布局的css:

  1. font-size
  2. line-height
  3. height
  4. vertical-align
  5. text-align

GFC

GFC，当为一个元素设置display:grid;的时候，此元素将会获得一个独立的渲染区域。然后进行设置布局。

GFC，是一个二维表格，但是 gridLayout 会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义。

Grid 布局可参考：

FFC

FFC，当为一个元素设置为display:flex，或display:inline-flex，将会生成自适应容器(flex container)。

Flex 布局可参考：

参考文档

原文地址：https://www.cnblogs.com/EnSnail/p/9866111.html

时间： 2024-08-12 05:18:54

重拾 BFC、IFC、GFC、FFC的相关文章

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

作者原文网址:http://www.cnblogs.com/dingyufenglian/p/4845477.html   What‘s FC? 一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用. BFC BFC(Block Formatting Contexts)直译为"块级格式化上下文".Block Formattin

学习BFC、IFC、FFC、GFC

FC(Formatting Context)格式化内容,常见的FC有BFC.IFC.FFC.GFC四种类型,BFC和IFC是W3C CSS2.1规范提出的概念,FFC和GFC是W3C CSS3规范提出的概念,其实就是定义了一套页面渲染的规则,决定了盒子以什么样的方式渲染从而占据什么样的位置区域,本文只是简单的学习笔记以供参考. 想要弄懂FC,首先得弄清楚盒子模型,常见的两种盒子模型为: IE盒子模型(怪异模式): width = content-width + padding-width + b

重拾linux

重拾linux 起因 因为想重拾起linux,同时需要用docker起几个镜像,用来学习网络知识.本来想直接去阿里云上买,后来一想自己机器上,起一个linux是个不错的选择,毕竟不花钱! 还可以用来做本地测试,学习使用linux.docker等.记录下过程,防止以后忘记!(所以不会涉及具体的安装步骤) 下载 到网易开源镜像站,挑选一个linux下载.我安装linux只要是为了学习运维方面的知识,同时用于进行网络知识方面的实践.如果你跟我一样,推荐Ubuntu server版本,纯字符界面,就跟一

重拾qt

最近公司又接了一个煤矿的项目,要写个小程序摘取数据,我是公司唯一c++程序员,本来搞ios搞好好的,现在又得重拾半年没摸得qt了.呵呵...呵呵呵. 这里只记录这次小程序的一些小的总结吧.. 1.中文字符: 函数:把一般字符串转为中文字符串: //中文处理 QString mysqlServerTs:: handleTheChinesCode(const char*words){ QTextCodec* tc = QTextCodec::codecForLocale(); return tc->

重拾梦想，做更好的自己

亥时,就寝,忽入空灵,甲申年出师已历一纪,诸多记忆电光石火逐一闪现.时年家贫无靠,生计无着,每日波奔却心系梦想,虽日日身疲体倦,却每以<孟子·告子下>篇中名句“天降大任于斯人也,必先苦其心志,劳其筋骨,饿其体肤,空乏其身,行指乱其所为,所以动心忍性,曾益其所不能也”以慰寸心,类比篇中清史名人,胸中满溢浩然正气,行事尽显峥嵘:历12载,生活稳定,已婚并育一女,四老体健而心宽,内子贤而持家,小女伶俐活泼,此三项尽得,可谓得意了. 然忆及往昔践行之路与现时行走之途,高下立判,原所行皆可日日前行,步步

重拾C/C++基础

1.复制指针时只复制指针中的地址,而不会复制指针指向的对象2.解决护栏柱错误的根本 是 从思想认知上搞定. 数组的序号为偏移量.  也即: 数组的第一个元素为arrName[0],其偏移量为03.使用strcpy函数时要注意,若是源串的长度大于目标串的长度,将会覆盖缓冲区后面的内容  所以尽量使用strncpy来替代strcpy4.数组可以使一维或者是多维.只要数组包含的元素为内置类型或者有默认构造函数的类,就可以初始化5.数学运算符有5个: +(加) -(减) *(乘) /(除) %(求模)6

重拾算法(5)——最小生成树的两种算法及其对比测试

重拾算法(5)——最小生成树的两种算法及其对比测试 什么是最小生成树 求解最小生成树(Minimum Cost Spanning Tree,以下简写做MST)是图相关的算法中常见的一个,用于解决类似如下的问题: 假设要在N个城市之间建立通信联络网,那么连通N个城市只需N-1条线路.这时自然会考虑这样一个问题:如何在最节省经费的前提下建立这个通信网. 在任意两个城市间都可以设置一条线路,相应地都要付出一定的经济代价.N个城市之间最多可能设置N(N-1)/2条线路,那么如何在这些线路中选择N-1条,

[java]基础重拾

7.17 重新学习了包管理 对于没有使用package打包的类,归到默认包.使用其他包名打包类,必须在工程文件夹下新建对应包名的目录.比如 package com.tencent.demo 则需要在工程文件夹下,新建名为com的文件夹,并在com文件夹下新建tencent文件夹,再简历demo文件夹,依次类推. [java]基础重拾

【玩转SQLite系列】(一)初识SQLite,重拾sql语句

转载请注明出处:http://blog.csdn.net/linglongxin24/article/details/53230842 本文出自[DylanAndroid的博客] [玩转SQLite系列](一)初识SQLite,重拾sql语句 SQLite由于是一个轻型的嵌入式的数据库,被应用于Android系统当中.在Android开发中 我们难免会用到SQLite数据库.接下来用一系列的文章来数据一下SQLite数据库. 一.认识SQLite 1.什么是SQLite SQLite,是一款轻型