知其所以然之CSS——BFC IFC GFC FFC

格式化上下文 (FC - Formatting Context )

格式化上下文是css视觉渲染过程中的一个重要概念，主要影响盒子布局；

BFC (Block Formatting Context)

BFC是布局中的迷你布局；

块级格式化上下文，指一个独立的块级渲染区域，只有Block-level Box可以参与；该区域有一套渲染规则来约束盒子布局，且与区域外部无关；

BFC形成条件（满足一下任一条件即可）:

1. 浮动元素，float除了none外的值
2. 绝对定位元素，position:absolute/fixed
3. overflow设置为hidden,auto,scroll
4. display为inline-block或者table-cell或者table-caption的元素

BFC并不是元素，而是元素带有的一些属性，因此上面元素是产生了BFC，而他们本身并不是BFC。

BFC规则

1. 内部的Box会在垂直方向一个接一个的放置
2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
3. BFC的区域不会与float box重叠
4. BFC就是页面上一个隔离的独立容器，容器里面的子元素不会影响到外面的的元素；反之亦然
5. 计算BFC高度的时候，浮动元素也参与计算
6. 每个元素margin box的左边与包含块border box的左边相接触，即使存在浮动也如此

BFC副作用

1. 使用 overflow 创建 BFC 后在某些情况下你可能会看到出现一个滚动条或者元素内容被削减，也可能使另一个开发人员感到困惑，无法理解代码的用意。
2. float: left 将把元素移至左侧，并被其他元素环绕

使用display:flow-root可以创建一个BFC并且没有副作用；但此属性浏览器兼容不好
无论什么时候创建BFC都要基于自身的需要来考虑

BFC作用

1. 包裹浮动元素（依据规则4、5）
   浮动元素是脱离文档流的，如果一个没有高度或者高度为auto的容器的子元素是浮动元素，则该容器的高度不会被撑开，通过BFC就能解决容器高度不会被撑开的问题。
2. 阻止外边距叠加（依据规则4）
3. 阻止环绕浮动元素，实现多列布局（依据规则3、4、6）
   
   对于浮动元素，可能会造成文字环绕的情况(Figure1)，但这并不是我们想要的布局(Figure2才是想要的)。要解决这个问题，我们可以用外边距，也可以用BFC；
   Figure1现象产生原因是：在BFC上下文中，每个盒子的左外侧紧贴包含块的左侧（从右到左的格式里，则为盒子右外侧紧贴包含块右侧），甚至有浮动也是如此（尽管盒子里的行盒子 Line Box 可能由于浮动而变窄），除非盒子创建了一个新的BFC（在这种情况下盒子本身可能由于浮动而变窄）。
   

IFC(Inline Formatting Context)

内联格式化上下文，盒子依次水平排列，从它包含块的最顶端开始。

盒子在垂直方向上可以以不同的方式对齐，以他们的顶部、底部、中部、文字基线对齐。

IFC作用

• 水平居中
  当一个块要在环境中水平居中时，设置其为inline-block则会在外层产生IFC，通过text-align则可以使其水平居中。

<style>
    .container{
          width:300px;
          height:300px;
          background: greenyellow;
          color:#fff;
          text-align: center;
      }
      .container span{
          width:200px;
          height:50px;
          background: lightcoral;
          display: inline-block;
      }
   </style>

   <div class="container">
       <span>IFC布局 — 水平居中</span>
   </div>

• 垂直居中
  创建一个IFC，用其中一个元素撑开父元素的高度，然后设置其vertical-align:middle，其他行内元素设置此属性既可以在此父元素下垂直居中

<style>
      .container{
           background: greenyellow;
           color:#fff;
           display: inline-block;
      }
      .container div{
           display: inline-block;
           width:120px;
           height:50px;
           background: lightskyblue;
           vertical-align:middle;
      }
      .container div:last-child{
           height:180px;
           background: lightblue;
           vertical-align:middle;
      }
   </style>
   <div class="container">
   		<div>1垂直居中</div>
       	<div>2垂直居中</div>
   </div>

GFC(GridLayout Formatting Context)

网格布局格式化上下文，display的值为grid时会生成网格容器。

可以在网格容器内定义行、列，为每个容器网格项目定义位置、空间

目前没有浏览器支持；

FFC(Flex Formatting Context)

自适应格式化上下文，display值为flex/inline-flex的元素将会生成自适应容器；

Flex Box由伸缩容器和伸缩项目组成。元素的display属性设置为flex/inline-flex可以得到一个伸缩容器。设置为flex（inline-flex）的容器被渲染成块级元素（行内元素）；

伸缩容器中的每个子元素都是一个伸缩项目，伸缩项目可以是任意数量。

Flex Box定义了伸缩容器内伸缩项目该如何布局；

扩展

1. 盒模型

它指定元素如何显示以及（某种程度上）如何交互。页面上每个元素都被看做一个矩形框，这个框由元素的内容、内边距、边框、外边距组成；如图所示：

2. Block-level Box

display属性为block,list-item,table的元素， 会生成block-level box。并且参与block formatting context;

3. Inline-level Box

display属性为inline,inline-block,inline-table的元素，会生成inline-level box。并且参与inline formatting context

4. 外边距重叠

当两个或者多个垂直边距相遇时，他们将形成一个外边距，这种合并外边距的方式成为折叠（collapse）。

折叠的结果按照如下规则计算：

1. 两个相邻的外边距都是正数时，折叠结果是它们两者中的较大值；
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
3. 两个外边距一正一负时，折叠结果是两者相加的和；

产生折叠的必要条件是两个margin必须是相邻的！！！

不产生折叠的情况参考此篇：揭开外边距折叠(Collapsing margins)的面纱

<style>
       .container p{
           width:100px;
           background-color: lightblue;
           margin:100px;
           height:80px;
       }
       .container p:last-child{
           margin:50px 100px 100px;
       }
   </style>

<div class='container'>
       <p>1</p>
       <p>2</p>
</div>

5. visible:hidden 与 display:hidden区别

visible:hidden隐藏元素，所占用的文档空间未消失；
display:hidden隐藏元素，不占用文档空间

6. CSS三种定位机制

普通流

在普通流中元素框的位置由元素在HTML中的位置决定。

块级框从上至下一个接一个地垂直排列， 框之间的垂直距离由框的垂直外边距计算出来。

行内框在一行中水平排列。

浮动

浮动框可以向左向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止；

浮动框不在文档的普通流中，所有文档普通流中的块框表现的就像浮动框不存在一样；

绝对定位

相对定位relative与绝对定位absolute、fixed

元素相对定位是相对于它的起点（原位置）移动，元素仍占据原先的空间，相对定位属于普通流定位模型。

元素绝对定位是相对于距离它最近的那个已定位的祖先（相对/绝对）元素决定的。如果没有已定位的祖先元素，那么它的位置相对于初始包含块；

固定定位是绝对定位的一种，不过固定元素的包含块是视口（viewport），使得我们能够创建总是出现在窗口固定位置的元素；

z-index属性控制定位框（相对/绝对）的堆叠次序。 z-index的值越高， 框的位置就上面

除非专门制定，否则所有的框都在普通流中

参考

CSS 浮动
CSS概念 - 可视化格式模型（二） 定位概述（普通流、绝对定位）
什么是BFC