扯点：FC - Formatting Context

notebin 发布于2019-08-29 14:11 / 2525人阅读

摘要：指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。两个同胞盒间的垂直距离取决于属性。同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。

FC（Formatting Context）指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。常见的FC有BFC、IFC，GFC和FFC。

BFC

BFC(block formatting context)直译为"块格式化上下文"。

block - 块级盒参与块格式化上下文

context - 这里的上下文指一个流：普通文档流, float, position

它是一个独立的渲染区域。它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

触发条件

the root element or something that contains it - 根元素或其它包含它的元素

floats (elements where float is not none) - 浮动元素 (元素的 float 不是 none)

absolutely positioned elements (elements where position is absolute or fixed) - 绝对定位元素 (元素的 position 为 absolute 或 fixed)

inline-blocks (elements with display: inline-block) - 内联块 (元素具有 display: inline-block)

table cells (elements with display: table-cell, which is the default for HTML table cells) - 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)

table captions (elements with display: table-caption, which is the default for HTML table captions) - 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)

anonymous table cells implicitly created by the elements with display: table, table-row, table-row-group, table-header-group, table-footer-group (which is the default for HTML tables, table rows, table bodies, table headers and table footers, respectively), or inline-table - 匿名表格元素，在元素display：table, table-row, table-row-group, table-header-group, table-footer-group(分别是默认的HTML表、表行,表,表头和表页脚)，inline-table时创建

block elements where overflow has a value other than visible - 具有overflow 且值不是 visible 的块元素

display: flow-root

elements with contain: layout, content, or strict - 元素有contains属性，值为layout, content, or strict

flex items (direct children of the element with display: flex or inline-flex) - flex items（display: flex or inline-flex元素的直接子元素）

grid items (direct children of the element with display: grid or inline-grid) - grid items（display: grid or inline-grid）

multicol containers (elements where column-count or column-width is not auto, including elements with column-count: 1) - multicol containers（元素的column-count或者column-width不是auto，包括元素column-count设置成1）

column-span: all should always create a new formatting context, - even when the column-span: all element isn"t contained by a multicol container - column-span: all 总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。

截止到2018.1.9为止，查看最新的触发条件 MDN链接

约束规则

在块格式化上下文中，盒从包含块顶部一个接一个地垂直摆放。

两个同胞盒间的垂直距离取决于 margin 属性。

同一个块格式化上下文中的相邻块级盒的垂直外边距将折叠。

每个盒的左外边缘紧贴包含块的左边缘（从右到左的格式里，则为盒右外边缘紧贴包含块右边缘），有浮动也是如此

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。外面的元素不会影响到容器内的子元素。

计算BFC的高度时，浮动元素也参与计算

IFC GFC，FFC

GFC，FFC是在css3提出的规范，后面会结果flex和grid做总结。

云服务器 GPU云服务器 Formatting 来扯点 Context 获取context

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112977.html

CSS中各种布局的背后(*FC)

摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。盒模型(Box M...

miracledan 2019-08-30 14:01 评论0 收藏0
FC及BFC

摘要：什么是块级格式化上下文是布局的对象和基本单位，直观点来说，就是一个页面是由很多个组成的。的用途可以阻止元素被浮动元素覆盖实现自适应两栏布局可以包含浮动元素清除内部浮动不同的可以阻止重叠思维导图 1.什么是FC showImg(https://segmentfault.com/img/bVbfrN8?w=808&h=286); 2.BFC块级格式化上下文(Block formatting...

魏明 2019-08-29 16:26 评论0 收藏0
FC及BFC

摘要：什么是块级格式化上下文是布局的对象和基本单位，直观点来说，就是一个页面是由很多个组成的。的用途可以阻止元素被浮动元素覆盖实现自适应两栏布局可以包含浮动元素清除内部浮动不同的可以阻止重叠思维导图 1.什么是FC showImg(https://segmentfault.com/img/bVbfrN8?w=808&h=286); 2.BFC块级格式化上下文(Block formatting...

layman 2019-08-02 11:17 评论0 收藏0
BFC与IFC概念理解+布局规则+形成方法+用处

摘要：下面就来介绍和的布局规则。布局规则原文整理为中文内部的会在垂直方向，一个接一个地放置。解决方案为加上使其形成，根据规则第六条，计算高度时就会计算的元素的高度，达到清除浮动影响的效果。并为这个外层元素设置，使其形成。想要理解BFC与IFC，首先要理解另外两个概念：Box 和 FC（即 formatting context）。 Box 一个页面是由很多个 Box 组成的，元素的类型和 d...

lbool 2019-08-29 12:39 评论0 收藏0
css布局的各种FC简单介绍：BFC，IFC，GFC，FFC

摘要：完整的说法是属于同一个的俩个相邻的的会发生重叠，与方向无关。元素会位于与与之间，使得宽度缩短。简单的说，有了之后，布局不再局限于单个维度了。什么是FC？ Formatting Context，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。 BFC 什么是BFC Block Formatting Context，块级格式...

mindwind 2019-08-29 15:24 评论0 收藏0