温故知新,巩固基础

从 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. 在摆放这些盒子时,水平方向上的marginborderpadding在盒子之间得到保留,是有效的,可以通过设置行框的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 布局可参考:

参考文档

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

  1. BFC,IFC,GFC,FFC

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

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

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

  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

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

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

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

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

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

  7. CSS之BFC、IFC、FFC and GFC

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

  8. CSS魔法堂:重拾Border之——更广阔的遐想

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

  9. CSS魔法堂:重拾Border之——不仅仅是圆角

    前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半径和垂直半径,然后又发现border-t ...

随机推荐

  1. android开发笔记(1)

    最近老师要求我们使用android开发一些东西.但是对我们而言,android是一个未知的方面.先说说我对于android的软件的基本认识,首先他很难,因为他是一个未知的领域:其次,我们只是掌握了一些 ...

  2. 44、WebStrom下载和破解

    WebStrom下载地址: http://www.pc6.com/mac/112553.html WebStrom 2017激活破解(http://blog.csdn.net/it_talk/arti ...

  3. 2019.01.22 zoj3583 Simple Path(并查集+枚举)

    传送门 题意简述:给出一张图问不在从sss到ttt所有简单路径上的点数. 思路: 枚举删去每个点然后把整张图用并查集处理一下,同时不跟sss和ttt在同一个连通块的点就是满足要求的点(被删去的不算). ...

  4. Oracle常用命令-用户、表空间、赋权限、导入导出

    1.1   删除表空间 drop tablespace QBKJ including contents and datafiles; 1.2   删除用户 drop user admin cascad ...

  5. Mybatis-Plus 实战完整学习笔记(五)------insert测试

    一.更新操作探究(3.0.3版本) demo /** * 修改用户 * @throws SQLException */ @Test public void update() throws SQLExc ...

  6. IntelliJ IDEA 2017版 spring-boot 2.0.3 邮件发送搭建,概念梳理 (一)

    邮件发送功能总结        第一部分 背景   一.使用场景 (1)注册验证    注册各大网站,通常需要输入邮件地址,在注册成功后,会发送一封邮箱验证的邮件,点击确认,证明这个邮箱是用户自己的 ...

  7. IntelliJ IDEA 2017版 spring-boot2.0.4+mybatis+Redis处理高并发,穿透问题

    一.当采用reddis缓存的时候,如果同时,一万次访问,那么就会有10000次访问数据库所以就会对数据库造成巨大压力,这时候,就要用到线程 1.方法体上加锁(优点,防护住了并发锁,缺点降低了内存效率) ...

  8. Object.create() 创建实例对象

    var person1 = { name: '张三', age: 38, greeting: function() { console.log('Hi! I\'m ' + this.name + '. ...

  9. gitlab常用命令

    进入本地仓库访问位置之后执行命令 1) 远程仓库相关命令 检出仓库:$ git clone git://github.com/jquery/jquery.git 查看远程仓库:$ git remote ...

  10. HDMI ip中的时钟 vid_clk与ls_clk

    由TMDS_Bit_clock_Ratio.TMDS_clk和色彩深度,就可以确定出tmds_clk,cdr_clk,vid_clk和ls_clk之间的关系. 1.Tmds_clk时钟频率的确定: 原 ...