BFC、IFC、FFC的概念和应用

2020-05-04 本文已影响0人忍不住的k

一、 BFC的概念和应用

1. BFC的概念

BFC的全称是 Block Formatting Contexts，块级格式化上下文，是页面中的一块渲染区域，他拥有一套渲染规则，决定内部的子元素如何定位，以及和其他元素的关系和相互作用。说白了就是一个决定如何渲染元素的容器。

2. BFC的渲染规则

内部的块级元素会再垂直方向一个接一个的放置
块级元素垂直方向的距离由margin决定，属于同一个BFC的两个相邻块级元素的margin会发生重叠
对于从左往右的格式化，每个元素（块级元素与行内元素）的左边缘，与包含块的左边缘相接触，(对于从右往左的格式化则相反)。即使包含块中的元素存在浮动也是如此，除非其中元素再生成一个BFC。
BFC的区域不会与浮动元素重叠
这点是BFC最重要的一点渲染规则，可以用这个规则解决很多布局的问题。
BFC是一个隔离的独立容器，容器里面的子元素和外面的元素互不影响。
计算BFC容器的高度时，浮动元素也参与计算。
这个规则，可以用来解决内部元素浮动，导致父级元素的高度坍塌问题。

3. BFC的触发条件

根元素
flloat的值不是none
position的值不是static或relative
display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell
overflow的值不是visible

4. BFC的应用

清除浮动
根据BFC的渲染规则第6点（计算BFC容器的高度时，浮动元素也参与计算）来清除浮动，解决高度坍塌的问题。
解决上下margin边距重叠问题
利用BFC渲染规则第2点（属于同一个BFC的两个相邻块级元素的margin会发生重叠），那么不属于同一个BFC的两个相邻块级元素的margin就不会发生重叠。
实现自适应两栏布局

<style>
    .main{
        background: red;
        height:500px;
    }
    .sider {
        float: left;
        width: 20%;
        height:300px;
        background: blue;
    }
</stley>
<body>
    <div class="sider">我是侧边栏</div>
    <div class="main">我是主体内容</div>
<body>

image.png

首先我们根据规则1，要先把.sider div写在.main div前面。这个.sider div才会浮动起来覆盖在.main div上面。
再根据规则4（BFC的区域不会与浮动元素重叠），给.main加上overflow:auto;触发.main div生成BFC。

image.png

二、 IFC的概念和应用

1、IFC的概念

IFC的全称是Inline Formatting Contexts，也就是“内联格式化上下文”。

2、IFC的生成条件：

IFC的生成条件非常简单，就是块级元素内仅包含内联元素。
需要注意的是当IFC中有块级元素插入时，会产生两个匿名块将父元素分割开来，产生两个IFC。

3.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，这些 boxes 分布在多个“line box”中。如果子元素未设置强制换行的情况下，“inline box”将不可被分割，将会溢出父元素。

4. IFC的应用

水平居中，当一个块要在当前环境水平居中，设置display:inline-block,会在外层生成一个IFC，通过设置text-align:center既可使其居中
垂直居中，创建一个IFC，用其中一个元素撑开高度，然后设置其vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。

三、FFC的概念和应用

1. FFC全称是 Flex formatting contexts，弹性盒模型

2. FFC的生成条件

父级元素设置display:flex或者display:inline-flex

3. 渲染规则：

菜鸟教程详解
ps: 生成FFC后，其子元素的float、clear和vertical-align属性将失效。