谈谈你了解的BFC

BFC 全称 Block Formatting Context
每个渲染区域用formatting context表示，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用
在正常流中的盒子要么属于块级格式化上下文，要么属于内联格式化上下文；

哪些元素生成 BFC

• 根元素；
• float属性不为none；
• position为absolute或fixed；
• display为inline-block, flex, 或者inline-flex；
• overflow不为visible；

BFC特性：

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

作用

• margin 合并
• contain float
  其中的一种解决方法：overflow:hidden ，创建新的BFC，可以包含float元素，父元素就有高度值了
  阐述：如果父元素只包含浮动元素，因为浮动元素是不包含在正常流的，浮动孩子将会脱离页面的常规流，因此父元素相当于不包含任何元素，高度为0。

而BFC里面有两条规则:
1、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
2、计算BFC的高度时，浮动元素也参与计算
overflow:hidden会产生新的BFC，子元素的被包含在父元素的BFC中，因此父元素不受子元素影响，恢复常规布局，遵循BFC规则，同时计算高度时，父元素的高度会将浮动元素算进来，因此父元素有了高度。

不过这里要阐述一件事就是高度塌陷只出现在父元素包含且只包含浮动元素的时候：

看图：在父元素没有明确定义height的时候，如果只包含浮动元素，父元素会出现高度塌陷的问题。（其中的解决方法主要有添加伪元素clear：both，设置父元素height，设置父元素overflow：hidden等方式）

image.png

下图：当父元素内部有非float元素时（clear：both的原理）

image.png

IFC

IFC也是一种布局规则，inline元素和inline-block符合IFC的布局规则。在IFC布局中重点关注一下line box。
　　（补充一下：IFC的生成条件是元素满足inline-level box）

内联格式化上下文

• IFC也是一种布局规则
• 块容器盒里面只有行级元素的时候，自动生成 IFC

引用