格式化上下文 BFC IFC

BFC

是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
块级格式化上下文，属于普通流。
一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。

常见定位方案 文档流

普通流
默认，从上而下，行内元素水平排列，行满换行，块级元素渲染成一个新行。
浮动
先按普通流位置出现，然后根据浮动方向偏移。
绝对定位
元素具体位置由绝对定位坐标组成。

形成BFC的条件

      1、浮动元素，float 除 none 以外的值； 
      2、绝对定位元素，position（absolute，fixed）； 
      3、display 为以下其中之一的值 inline-block，table-cell，table-caption、flex； 
      4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
      5、body 根元素

BFC的特性

      1.内部的Box会在垂直方向上一个接一个的放置。
      2.垂直方向上的距离由margin决定
      3.bfc的区域不会与float的元素区域重叠。
      4.计算bfc的高度时，浮动元素也参与计算
      5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。

特性的第一条是：内部的Box会在垂直方向上一个接一个的放置。
浮动的元素也是这样，box3浮动，他依然接着上一个盒子垂直排列。并且所有的盒子都左对齐。

特性的第二条：垂直方向上的距离由margin决定
在常规文档流中，两个兄弟盒子之间的垂直距离是由他们的外边距所决定的，但不是他们的两个外边距之和，而是以较大的为准。

不被浮动元素覆盖

 <div class="left"></div>
    <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    </p>
环绕
   .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        p {
            background-color: green;
            /* overflow: hidden; */
        }

利用bfc防止环绕
   .left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        p {
            background-color: green;
            overflow: hidden;
        }

环绕.png 利用bfc防止环绕.png

BFC包含浮动的块
利用overflow:hidden清除浮动
BFC可以包含浮动的元素(清除浮动)
可以阻止元素被浮动元素覆盖

BFC的布局规则如下：

　　  1.内部的盒子会在垂直方向，一个个地放置；
　　  2.BFC是页面上的一个隔离的独立容器；
　　  3.属于同一个BFC的两个相邻Box的上下margin会发生重叠；
　　  4.计算BFC的高度时，浮动元素也参与计算
　　  5.每个元素的左边，与包含的盒子的左边相接触，即使存在浮动也是如此；
　　  6.BFC的区域不会与float重叠；

块格式化上下文对于定位与清除浮动很重要。定位和清除浮动的样式规则只适用于处于同一块格式化上下文内的元素。

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

阻止元素被浮动元素覆盖
可以包含浮动元素
阻止因为浏览器因为四舍五入造成的多列布局换行的情况
阻止相邻元素的margin合并

IFC

IFC布局规则

子元素水平方向横向排列，并且垂直方向起点为元素顶部。
子元素只会计算横向样式空间，【padding、border、margin】，垂直方向样式空间不会被计算，【padding、border、margin】。
在垂直方向上，子元素会以不同形式来对齐（vertical-align）
能把在一行上的框都完全包含进去的一个矩形区域，被称为该行的行框（line box）。行框的宽度是由包含块（containing box）和与其中的浮动来决定。
IFC中的“line box”一般左右边贴紧其包含块，但float元素会优先排列。
IFC中的“line box”高度由 CSS 行高计算规则来确定，同个IFC下的多个line box高度可能会不同。
当 inline-level boxes的总宽度少于包含它们的line box时，其水平渲染规则由 text-align 属性值来决定。
当一个“inline box”超过父元素的宽度时，它会被分割成多个boxes，这些 oxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

上下间距不生效可以使用IFC来解释

.text { margin: 20px; background: green; }
 <span class="text">文本二</span>

多个元素水平居中

水平排列规则根据IFC容器的text-align值来排列，可以用来实现多个子元素的水平居中。
.warp { border: 1px solid red; width: 200px; text-align: center; }
<div class="warp">
    <span class="text">文本一</span>
    <span class="text">文本二</span>
</div>

float元素优先排列

.warp { border: 1px solid red; width: 200px; }
.text { background: green; }
.f-l { float: left; }
<div class="warp">
    <span class="text">这是文本1</span>
    <span class="text">这是文本2</span>
    <span class="text f-l">这是文本3</span>
    <span class="text">这是文本4</span>
</div>

解决元素垂直居中、多个文本元素行高不一致排列混乱。...