BFC&IFC

BFC

概念

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

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

触发BFC的条件

• 浮动标签
• display为table-cell、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的高度时，浮动子元素也参与父标签高度计算，可以解决浮动子元素的高度塌陷问题。

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区域的高度撑大。

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

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

  • normal：指的是行高是由文字的内容高度来决定的，默认情况。
  • 数字:指的是行高由font-size的倍数来决定的 。即数字就是font-size的倍数。line-height:1 表示font-size的一倍。
  • 具体的px：行高是由像素来决定的，但是IFC区域的最小高度即为文字的内容高度。
  • 如果line-height很小，第一会导致行盒(IFC区域)的高度等于文字的内容高度，但是包含IFC区域的标签高度会受到行高的影响。

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

  • baseline：默认取值，指标签之间的是以基线为对齐参考线。
  • top：行内块级元素的顶部和IFC区域的顶部对齐。
  • bottom：行内块级元素的底部和IFC区域的底部对齐。
  • text-top：行内块级元素的顶部和父标签里的文字的顶部对齐。
  • text-bottom：行内块级元素的底部和父标签里的文字的底部对齐(font-size是给父标签设置)。
  • middle:垂直居中。