CSS之BFC

经典真题

• 介绍下BFC
• 介绍下BFC、IFC、GFC、FFC

先了解下BFC吧

全称Block formatting contexts，块级格式化上下文。 简单来说吧：BFC就是一个独立的布局环境，BEC内部的元素布局与外部互不影响。

1. 内部的box会在垂直方向排列
2. 垂直方向上的间距由margin决定，属于同一个BFC的垂直方向上相邻的box的margin会重叠。
3. BFC的区域不会与浮动box重叠。
4. 每个box的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
5. BFC就是页面上的一个独立容器，容器里面的子元素不会影响外面的元素，外面的也不会影响容器内的元素。
6. 计算BFC的高度时，浮动元素也参与计算。
7. body是一个天然的BFC

触发BFC的方法

1. float：left/right

2. position:absolute/fixed

3. overflow:auto/scroll/hidden/overlay

4. display:inline-block/table-cell/table-caption/inline-flex/flex

BFC总结

1. 父元素不设宽高，会由内容撑开，若子元素浮动，则高度塌陷。需要将父元素变为BFC，才能宽高才能由内容决定。
2. 第一个子元素浮动，第二个就会上移，并位于浮动元素的下面。将第二个变为BEC。两个子元素就并列紧贴。可用于两栏自适应布局。

其他FC

IFC：inline formatting context 行内格式化上下文，一块区域，以行内元素的形式来格式化。 GFC：GrideLayout 网格布局格式化上下文。 FFC：Flex 弹性格式化上下文。