BFC和IFC

BFC

概念

• FC(format context-格式化上下文).指的是页面中的一块区域，这块区域可能是一个div或者p标签，或者一堆行内元素构成的一行空间。根据标签的分类，将fc也分成了两种

  • BFC:(块级格式化上下文)：一个块级标签，当满足一定条件时会触发bfc，触发之后，会带有BFC区域的特点，理解为这个块级标签自身变成一个bfc区域。我们可以利用这些特点辅助解决常见的布局问题，比如浮动父标签高度塌陷，或者margin带跑或层叠问题。

触发BFC条件

• 浮动标签

• display为table-ceil、inline-block、flex中的一个

• position为absolute、fixed中的一个

• overflow不为visible

• 根标签(body)

BFC区域特点

• 内部的Box会在垂直方向，一个接一个地放置。

• Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

  • 如果说不想让垂直margin发生重叠，我们可以形成一个新的bfc区域。

  • 做法：将相邻的一个盒子放置到一个新的盒子中，成为子标签，然后将新的盒子设置为一个bfc，那么就两个盒子就不再属于同一个bfc区域

• 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。

• BFC的区域不会与float box重叠。

  • 利用这点，可以实现非浮动元素(bfc)和浮动元素实现同行显示。可以实现三栏式自适应布局

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

• 计算BFC的高度时，浮动子元素也参与父标签高度计算

  • 可以解决浮动子元素的高度塌陷问题

BFC应用

• 解决margin重叠

• 浮动元素父标签高度塌陷

• 间接清除浮动元素带来的影响

• 实现三栏式自适应布局-被弹性布局给替代了，

IFC

概念

• IFC(inline Format context):指一行空间，并规定了行内标签以及行内块级标签在该空间中 如何进行排列

• ifc区域的高度以及标签的对齐方式是有几个css属性共同决定

  • font-size:

  • font-family

  • line-height

  • vertical-align:

• 默认情况下，ifc区域的高度是由该行空间中高度最高的行内(行内块)标签来决定的

相关属性

• font-size:

  • 字体越大，可能会导致整个ifc区域的高度变大。

  • 如果ifc区域中只有文字，那么该ifc区域的高度是由font-size来决定。font-size越大，ifc区域的高度就越高。

  • 只包含文字部分的高度叫做内容高度。font-size越大，会导致文字的内容高度变大，内容高度会把ifc区域的高度撑大

• line-height:设置一行内容的高度，即行高

  • normal:指的是行高是由文字的内容高度来决定的，默认情况。

  • 数字:指的是行高由font-size的倍数来决定的 。即数字就是font-size的倍数。line-height:1 ==font-size的一倍

  • 具体的px：行高是由像素来决定的。但是ifc区域的最小高度即为文字的内容高度。

  • 如果line-height很小，第一会导致行盒(ifc区域)的高度等于文字的内容高度，但是包含ifc区域的标签高度会收到行高的影响

• font-family:不同的 字体类型也会影响ifc区域的高度。

• vertical-align:决定ifc区域中行内块级元素之间的垂直对齐方式

  • baseline:默认取值，指标签之间的是以基线为对齐参考线

  • top:行内块级元素的顶部和ifc区域的顶部对齐

  • bottom：行内块级元素的底部和ifc区域的底部对齐

  • text-top：行内块级元素的顶部和父标签里的文字的顶部对齐

  • text-bottom：行内块级元素的底部和父标签里的文字的底部对齐

    • font-size是给父标签设置

  • middle:垂直居中

• 总结：

  • ifc区域高度是由font-size、font-family、line-height、vertical-align共同决定。line-height和vertical-align如果同时设置，那么ifc区域的高度也会发生变化。

  • ifc区域通过line-height来设置行盒中文字的垂直对齐。vertical-align来决定行内块级元素的垂直对齐方式

  • BFC是满足某些条件之后的标签的内部空间，BFC区域会额外的有6条规则可以使用，一般可以用来解决margin重叠、浮动子标签导致的高度塌陷问题、三栏式适应布局（被弹性布局给替代了）

  • IFC是知道一行的空间，无需触发条件。IFC通过多个CSS属性来决定行内块标签之间如何进行对齐以及计算一行空间的高度。一行空间也被称为行盒（ifc区域）

IFC

• 指的试试针对一行的内容需要遵守的规则，即IFC确定了行间的标签如何对齐以及影响一行的高度

• 内容：

  • 一行内里的标签如何对齐

  • 一行的 高度如何确定

• 理解

  • IFC是默认就有的，具体的是由多个CSS属性来共同影响一行的高度以及行内（行内块）标签之间的对齐

  • 影响一行高度的css属性

    • font-size

    • font-family

    • line-height

  • 影响行内标签之间对齐

    • certical-align

• 主要内容

  • 一行高度一般情况下是由行内最高的标签来决定

    • 一行中只有文本或文本类的标签。比如a、span。一般由font-family以及font-size来决定。当然如果line-height大于了这两者，那么高度就由line-height来决定

    • 如果有图片或表单元素时（即行内块标签）：由行内最高标签以及vertical-align共同决定

• font-size

• font-family

• line-height

IFC的经典对齐场景

• 居中对齐

  • 对该行的所有行内块标签设置vertical--align：middle

• 多个display：lnlin-block的div进行对齐

  • 默认情况下，这几个div会按照第一行内容的基线对齐,但可能会导致显示错乱，可以使用一下方式进行对齐

    • vertical-align：top

    • vertical-align：text-top；推荐