CSS里的BFC和IFC的用法

**1、BFC**
---------------------
Block Formatting Contexts (BFC，块级格式化上下文)，就是 一个块级元素 的渲染显示规则 （能够把 BFC 理解为一个封闭的大箱子，容器里面的子元素不会影响到外面的元素）。

**一、BFC的布局规则例如如下：**

①.内部的盒子会在垂直方向，一个个地放置。
②.盒子垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的上下margin会发生重叠。

③.每个元素的左边，与包括的盒子的左边相接触，即便存在浮动也是如此。

④.BFC的区域不会与float重叠。

⑤.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

⑥.计算BFC的高度时，浮动元素也參与计算。

**二、介绍过了BFC的布局规范，再来讲说哪些元素会触发BFC。**

**只要元素知足下面任一条件便可触发 BFC 特性**

①.根元素。

②.float的属性不为none。

③.position为absolute或fixed。

④.display为inline-block；table-cell；table-caption；flex。

⑤.overflow不为visible。

**三、接下来讲说BFC的做用和原理**

**①、解决margin重叠问题**
**②、解决浮动高度塌陷问题**
**③、解决侵占浮动元素的问题**

首先看看自适应两栏布局
咱们先定义两个div：

`<div class="aside"></div>`

`<div class="main"></div>`

**四、而后定义css：**

`div {
width:300px;
}`

`.aside {
width: 100px;
height: 150px;
float: left;
background: black;
}`

`.main {
height:200px;
background-color:red;
}`

效果图例如如下：

 

这正知足了规范的第三条：
**每个元素的左边，与包括的盒子的左边相接触。即便存在浮动也是如此。**

因此假设咱们需要将黑色区域撑到红色的左边。就需要利用规范的第四条：
BFC的区域不会与float重叠。

也就是说咱们需要创造BFC区域。咱们经过将红色区域的overflow设为hidden来触发BFC：

`.main {
overflow:hidden;
height:200px;
background-color:red;
}`

效果例如如下：

**五、接下来看看清除内部浮动
首先是父div套子div**

`<div class="parent">
<div class="child"></div>
</div>`

**六、而后是css：**

`.child {
border:1px solid red;
width:100px;
height:100px;
float:left;
}`

`.parent {
border:1px solid black;
width:300px;
}`

效果例如如下：

可以看到，父div压根就没有被撑开。
咱们再回想一下BFC规范中的第六条：
计算BFC的高度时，浮动元素也參与计算。

因此咱们需要将父div触发为BFC，也就是将其overflow设为hidden：

`.parent {
border:1px solid black;
width:300px;
overflow:hidden;
}`

效果例如如下：

可以看到父div已经撑开了。

**七、再谈谈margin重叠问题。**

先定义两个垂直的div：

`<div class="p"></div>`

`<div class="p"></div>`

而后定义margin:

`.p {
width:200px;
height:50px;
margin:50px 0;
background-color:red;
}`

可以看到margin重叠后的效果：

 

咱们再看看BFC规范的第二条：

盒子垂直方向的距离由margin决定，属于用一个BFC的两个相邻Box的上下margin会发生重叠。

说明二者属于同一个BFC，因此咱们需要两个div不属于同一个BFC。

为第二个div套一个父亲div。而后讲其overflow设为hidden来激活一个BFC就可以使margin再也不重叠。

`<div class="p"></div>`

`<div class="wrap">`

`<div class="p"></div>`

`</div>`

`.wrap {
overflow:hidden;
}`

效果例如如下：

**2、IFC**
---------------------
IFC(Inline Formatting Contexts)
直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)

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

**垂直居中**：建立一个IFC，用其中一个元素撑开父元素的高度，而后设置其vertical-align:middle，其余行内元素则能够在此父元素下垂直居中。

**BFC的布局规则例如如下：**

1.ifc中的元素会在一行中从左到右排列。
2.在一行上的全部元素会在该区域造成一个行框。

3.行宽的高度为包含框的高度，高度为行框中最高元素的高度。
4.浮动的元素不会在行框中，而且浮动元素会压缩行框的宽度。

5.行框的宽度容纳不下子元素时，子元素会换到下一行显示，而且会产生新的行框。

6.行框的元素内遵循text-align和vertical-align。

**若是你们以为个人文章写的还不错的话，就关注 收藏一下哦！**

**还能够加我微信一块儿探讨下前端问题。**

**微信：rgz987**