【CSS】浅谈css中格式化上下文BFC、IFC（一）

桃扇骨 2022-06-05 10:56 392阅读 0赞

## 格式化上下文 ##

格式化上下文指的是元素所处的环境以及初始化。这里的初始化就是所谓的格式化（如手机的重置，恢复出厂设置），环境也称为上下文（不同的环境会有不同的结果）。  
格式化上下文分为：

1.  **块**格式化上下文
2.  **行内**格式化上下文

## 从Overflow清除浮动开始 ##

*  visible：不对超出的内容做处理
 *  hidden：剪切超出内容（超出部分隐藏）
 *  scroll：不管内容是否超出，添加滚动条
 *  auto：超出的内容以卷动滚动条的方式呈现

之所以给父元素.box添加overflow，是因为它的子元素.item浮动了。  
如果不添加overflow，子元素.item就会超出.box的内容区域，也就是说父元素无法自适应子元素的大小。

## Block Formatting Context ##

如标题，BFC就是它的缩写。他的中文名叫：块（级）格式化上下文

1.BFC的特点

1.  在一个BFC中，块框会朝着**垂直方向**一个接一个地排列，从[包含块][Link 1]的顶部开始。如果两个以及两个以上的框，在同一个块级格式化上下文中，那么他们**相邻垂直方向的margin会合并**成一个（按照较大的margin计算）。这里牵扯到margin外边距折叠的问题。
2.  在BFC中，盒子从包含块**最左边**开始摆放。如果该元素创建了一个新的BFC，那么该盒子自身的宽度会因为浮动而变化，变化的大小与浮动元素相关。
3.  在一个BFC中，囊括块里面的所有元素，但**不囊括创建了新BFC的元素**。
4.  当一个框创建一个BFC时，他将包括**浮动的元素**（这也是为什么父元素设置overflow:hidden；可以自适应浮动元素的原因）。

2.如何创建一个BFC

*  根元素（html）自身就是一个BFC
 *  浮动float值不为none
 *  绝对定位position值为absolute、fixed的元素
 *  display值不为block的元素
 *  表格单元格display为table-cell的元素
 *  表格标题diaplay为table-caption的元素
 *  overflow值不为visible的元素
 *  弹性盒子display为flex、inline-flex的元素

3.BFC特性验证

**特性一**： [垂直外边距折叠（margin折叠）][margin]

![这里写图片描述][SouthEast] ![这里写图片描述][SouthEast 1]  
以上111111和222222之间的margin折叠了。

**特性二**：

<!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style> .item1{ width: 100px; height: 100px; float: left; margin-left: 10px; background-color: pink; } .item2{ width: 200px; height: 100px; background: orange; } </style>
    </head>
    <body>
    <div class="box">
        <div class="item1">item1</div>
        <div class="item2">item2</div>
    
    </div>
    </body>
    </html>

![这里写图片描述][SouthEast 2]  
可以看到，item2还是靠到了包含块的最左边。

我们给item2加一个overflow:hidden;之后，创建了一个新的BFC  
![这里写图片描述][SouthEast 3]  
以上可以应用在哪里呢？可以应用在如下场面

如果不加overflow就会变成这样![这里写图片描述][SouthEast 4]  
但是我们想要的排版效果是这样![这里写图片描述][SouthEast 5]

放在之前，我们可以只给橙色块加margin-left **这里需要注意的是，如果采用margin-left,则需要算上img块的宽度。**，但是了解BFC之后，我们可以用overflow或者float来解决。具体代码不再赘述，原理就是把橙色块变成一个BFC;。

但是这种效果***如果不设置宽度的话***，用float和display:inline-block;实现，就会出现一些奇怪的问题，float和display:inline-block的话橙色块会掉下来  
![这里写图片描述][SouthEast 6]  
而使用display:block;  
![这里写图片描述][SouthEast 7]  
但是如果使用overflow：hidden就不会  
![这里写图片描述][SouthEast 8]

其他特性不再一一验证。有兴趣可以自己验证。

挚谢阅读。  
敬请期待下一期：  
**[【CSS】浅谈css中格式化上下文BFC、IFC（二）][CSS_css_BFC_IFC]**

[Link 1]: http://blog.csdn.net/liu_jiachen/article/details/78625329
[margin]: http://blog.csdn.net/liu_jiachen/article/details/78631346
[SouthEast]: https://img-blog.csdn.net/20171125120634314?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1X2ppYWNoZW4=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast
[SouthEast 1]: /images/20220605/25e798cbcd2b4e8b9c8dccf1950461fb.png
[SouthEast 2]: /images/20220605/07b72991002a4a21ada0811fb37bf0e0.png
[SouthEast 3]: /images/20220605/43b1e304ae734a1c8fddf14ee6b169b1.png
[SouthEast 4]: /images/20220605/38521ac27e72416ab32142a7bf547f4b.png
[SouthEast 5]: /images/20220605/b05babd60d50425baab06f14243afa66.png
[SouthEast 6]: /images/20220605/2740529fff4d4b118c6361b6e98d4af6.png
[SouthEast 7]: /images/20220605/2ee82ef1fdc7403daa695fcf2101efc7.png
[SouthEast 8]: /images/20220605/7887db1bd01f406db8ead7153c18bb6c.png
[CSS_css_BFC_IFC]: http://blog.csdn.net/liu_jiachen/article/details/78631716