关键词：
bfc
定义：块级格式化上下文，他是一个独立的渲染区域，他规定了这个内部如何布局，并且与这个区域的外部毫不相干。
BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠，常用来清除浮动和布局。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算
生成bfc的元素有哪些：
float的属性不为none
position为absolute和fixed
overflow不为none
display为inline-block，table-cell，flex，inline-flex
ifc
定义：行内格式化上下文
IFC布局规则：
框会从包含块的顶部开始，一个接一个地水平摆放。
摆放这些框的时候，它们在水平方向上的外边距、边框、内边距所占用的空间都会被考虑在内。在垂直方向上，这些框可能会以不同形式来对齐：它们可能会把底部或顶部对齐，也可能把其内部的文本基线对齐。能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框。水平的margin、padding、border有效，垂直无效。不能指定宽高。
行框的宽度是由包含块和存在的浮动来决定。行框的高度由行高计算这一章所描述的规则来决定。
行框一定会高到足以容纳它所包含的全部框。然而，它也可能比它所包含的最高的框还要高（例如：这些框是以基线对齐）。当框 B 的高度小于包含它的行框时，则 B 在行框中垂直对齐的位置由’vertical-align’ 属性来决定。当几个行级框在水平方向上无法塞得进同一个行框时，它们会被分布在两个或多个垂直堆放的行框中。行框会以既没有垂直间距 也没有重叠的方式被垂直堆放起来。
通常，行框的左边紧贴其包含块的左边，而行框的右边紧贴其包含块的右边。然而，浮动框可以插在包含块边缘与行框边缘之间。因此，尽管在同一个IFC中的行框通常有同样的宽度（也就是其包含块的宽度），但它们的宽度也可能受浮动让水平可用空间减少的影响而有所改变。在同一个IFC中，行框的高度通常是变化的（例如：某一行包含了一个比较高的图片，而其它行只包含文本）。
当一行上的行级框的总宽度小于包含它们的行框的宽度，则它们在行框内的水平分布由’text-align’属性来决定。
当一个行内框的宽度超过了行框的宽度，则它会被分割成几个框，而这些框会分布在几个行框。如果此行内框不可分割（例如：单个字符、或语言指定的文字打断规则不允许在此行内框中出现打断、或该行内框受 white-space 属性为 nowrap或 pre 的影响），那么该行内框溢出该行框。
行内框被分割的时候，外边距、边框和内边距在出现分割的地方都没有视觉效果。
**行高计算 ― ‘line-height’ 与 ‘vertical-align’ 属性**
计算行框里的各行内级框的高度。对于置换元素、行内块元素、行内表格元素来说，这是边界框的高度，对于行内框来说，这是其 ‘line-height’。
行内级元素根据其 ‘vertical-align’ 属性垂直对齐。
行框的高是最顶端框的顶边到最底端框的底边的距离。
css布局的各种fc简单介绍：bfc，ifc，gfc，ffc
什么是FC？FormattingContext，格式化上下文，指页面中一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素的相互关系和作用。BFC什么是BFCBlockFormattingContext，块级格式化上下文，一个独立的块级渲染区... 查看详情
前端的bfcifcgfc和ffc
什么是BFC、IFC、GFC和FFCCSS2.1中只有BFC和IFC,CSS3中才有GFC和FFC。FC的全称是：FormattingContexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系... 查看详情
css3与页面布局学习总结——bfc定位浮动7种垂直居中方法
一、BFC与IFC1.1、BFC与IFC概要BFC（BlockFormattingContext）即“块级格式化上下文”，IFC（InlineFormattingContext）即行内格式化上下文。常规流（也称标准流、普通流）是一个文档在被显示时最常见的布局形态。一个框在常规流中必... 查看详情
bfc
一、BFC(blockformattingcontext)Formattingcontext是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formattingcontext有Blockfomattingcontex... 查看详情
什么是bfcifcgfc和ffc
什么是BFC、IFC、GFC和FFCCSS2.1中只有BFC和IFC,CSS3中才有GFC和FFC。FC的全称是：FormattingContexts，是W3CCSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系... 查看详情
css3bfc定位浮动7种垂直居中方法
一、BFC与IFC1.1、BFC与IFC概要1.2、如何产生BFC1.3、BFC的作用与特点二、定位2.2、relative2.3、absolute2.4、fixed2.5、z-index属性2.6、菜单2.7、:target伪类三、浮动3.1、float取值3.2、float的特性3.3、清除浮动3.3.1、清除外部浮动3.3.2、清除内部... 查看详情
bfc布局与ifc布局以及普通文档流布局(代码片段)
BFC布局BFC(BlockFormattingContext)块级格式化上下文。它是一个独立的渲染区域。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。块级元素：父级（是一个块元素）内容：子元素ÿ... 查看详情
深入理解bfc
...为定位流、浮动流和普通流三种。而普通流其实就是指BFC中的FC。FC是formattingcontext的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系... 查看详情
bfc布局与ifc布局以及普通文档流布局(代码片段)
BFC布局BFC(BlockFormattingContext)块级格式化上下文。它是一个独立的渲染区域。它决定了块级元素如何对它的内容进行布局，以及与其他元素的关系和相互关系。块级元素：父级（是一个块元素）内容：子元素ÿ... 查看详情
bfc布局
...定其子元素如何布局及与其他元素的关系和作用。FC分为BFC、IFC、GFC和FFC，其中BFC(blockformattingcontext)块级格式化上下文BFC特点1.内部的box会在垂直方向上，一个接一个地放置2.box垂直方向的距离由margin决定， 查看详情
关于bfc(代码片段)
...，那块级格式化上下文又是什么呢？BFC是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。说白了，他就是一个规则。BFC的规则是什么呢？内部的Box会在垂直方向，一个接... 查看详情
css之bfc
...器，容器里面的元素不会在布局上影响到外面的元素。在CSS3中。BFC叫做FlowRoot。在CSS2.1中。有三种定位方案——普通流（NormalFlow），浮动（Float）和绝对定位（AbsolutePositioning）。（1）怎样触发BFC？ 下列情况将创 查看详情
前端面试题6道开胃菜css+js+vue(代码片段)
css区 一：BFC的相关：BFC的概念？了解：CSS2.1中只有 BFC 和 IFC, css3中还增加了 GFC 和 FFC。BFC定义：BFC（Blockformattingcontext）直译为“块级格式上下文”，它是一个独立渲染区域，只有BLOCK-LEV... 查看详情
理解css布局和bfc(代码片段)
CSS布局中有一些概念，一旦你理解了它们，就能真正提高你的CSS布局能力。本文是关于块格式化上下文(BFC)的。你可能从未听说过这个术语，但是如果你曾经用CSS做过布局，你可能知道它是什么，理解什么是BFC... 查看详情
前端面试css系列——bfc
...以及盒子之间的关系和作用。解释说明Box(盒子)Box盒子是CSS布局的基本单位，在CSS中我们广泛的使用两种『盒子』——块级盒子和内联盒子。HTML元素的类型和display属性，决定了一个 查看详情
ifcandbfc
BFCandIFC1，IFC--针对行内元素--行内格式上下文BFC--针对块级元素--块级格式上下文2，IFC特点：行框的高度由包含元素的高度和有没有float元素决定。通常，行框的左边距接触到包含快的左边，右边距接触到包含块的右边浮动元素可... 查看详情
css中各种布局的背后(*fc)
CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1中只有BFC和IFC,CSS3中还增加了FFC和GFC。盒模型(BoxModel) 上图为W3C标准盒模型，另外还有一种IE盒模型（IE6以下），唯一的区别就是：前者width=content，后者width=content+padding+borde... 查看详情
揭开css中bfc的面纱
...kFormattingContext）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。二、形成BFC的条件 &nbs 查看详情