BFC，IFC

最新推荐文章于 2021-02-03 17:29:10 发布

乙只

最新推荐文章于 2021-02-03 17:29:10 发布

阅读量102

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_40664253/article/details/97304092

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

BFC(块级格式化上下文Block formatting context)

1、理解BFC前，先了解Box,Formatting Context的概念
Box:CSS布局的基本单位
一个页面由很多个Box组成，元素的内容和display属性，决定了这个Box的类型。不同类型的Box，会参与不同的Formatting Context（一个绝对如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。有哪些盒子：

block-level box: display属性为block,list-item,table的元素，会生成block-level box,参与block formatting context;
inline-level box: display属性为inline,inline-block,inline-table的元素，会生成inline-level box,参与inline formatting context;
run-in box:css3中才有，待定。

2、定义：

一个独立的渲染区域，只有Block-level Box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部不相干。
3、布局规则：

内部的Box会在垂直方向，一个接一个放置；
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠；
每个元素的margin box的左边，与包含块border box的左边相接触（对于从左向右的格式化，否则相反），存在浮动也是如此(即每个盒子的左外边缘margin-left会触碰到容器的左边缘border-left)；
BFC的区域不会与float box重叠；
BFC就是页面上的一个隔离的独立容器，容器里的子元素不会影响到外面的元素,反之亦然；
计算BFC高度时，浮动元素也参与计算。

4、哪些元素会生成BFC:

根元素
float:left | right
position:absolute | fixed
display:inline-block | table-cell | table-caption | flex|inline-flex
overflow:auto | hidden | scorll
5、BFC的作用：
自适应两栏式布局：左栏定宽左浮动，右栏不定宽overflow：hidden（设为BFC）
清除内部浮动：父元素overflow:hidden(设为BFC)
防止垂直margin重叠：其中一个元素外套一个div并设置overflow:hidden(设为BFC)

IFC(行内格式化上下文Inline Formatting Contexts)

1.定义：
内部元素从包含块的顶部开始，从左至右（默认）排列成一行形成的一个矩形盒子
IFC的线框（line box）高度由其包含行内元素中最高的实际高度计算而来（不受垂直方向的padding/margin影响）
2.布局规则：

内部的Box会在水平方向，一个接一个放置；
这些盒子垂直方向的起点从包含块盒子的顶部开始；
在垂直方向上，这些框可能会以不同方式来对齐(vertical-align)：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线对齐；
能把在一行上的框完全包含进去的一个矩形区域，称为该行的行框（inline box）。行框的宽度是由包含块（containing box）和存在的浮动来决定；
line box 一般左右边都贴紧其包含块，但是会因为float元素的存在发生变化。float元素会位于IFC与line box之间，使得line box宽度缩短；
line box 高度由 CSS 行高计算规则来确定，同个 IFC 下的多个 line box 高度可能会不同。行框的高度为包含框的高度，高度为最高元素的高度；
当 inline-level boxes 的总宽度少于包含它们的 line box 时，其水平渲染规则由 text-align 属性来确定，如果取值为 justify，那么浏览器会对 inline-boxes（注意不是inline-table 和 inline-block boxes）中的文字和空格做出拉伸。
行框的宽度容纳不下子元素时，子元素会折行显示，并产生新的行框,行框们之间垂直方向不能分离，不能重叠；
行框的元素内遵循text-align和vertical-align

3.应用：

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