这是我参与「第四届青训营 」笔记创作活动的的第1天
关键词
- BFC: Block Formatting Context, 块级格式化上下文
- IFC: Inline Formatting Context, 行级格式化上下文
- FFC: FLEX Formatting Context
- GFC: GRID Formatting Context
补充: * KFC: Kentucky Fried Chicken, 肯德基*
常规流概述
- 常规流，又称文档流、普通文档流、常规文档流
- 所有元素在默认情况下，都应该属于常规流布局(非默认情况即元素设置了浮动或定位)
规则
- 块盒独占一行，自上向下排列；行盒水平依次排列；
- 块级元素之间的外边距会发生折叠（父子元素之间、兄弟元素之间）
- 行盒会自动创建IFC，并且每一行为一个IFC
BFC
一个BFC的范围包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。
如何创建BFC
- 根元素或其它包含它的元素
- 浮动 float: left/right/inherit
- 绝对定位元素 position: absolute/fixed
- 行内块display: inline-block
- 表格单元格 display: table-cell
- 表格标题 display: table-caption
- 溢出元素 overflow: hidden/scroll/auto/inherit
- 弹性盒子 display: flex/inline-fle
创建了BFC的元素要遵守的布局规则
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
- 每个元素的margin box的左边， 与包含块content box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
- BFC的区域不会与float box重叠，可见如下示例：
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算
对某些场景的解释
在IFC内出现块盒时
浏览器会在 ”IFC内部“ 的这个块盒的两边生成两个匿名行盒并将两边的内容包裹,实际上由于IFC不能包括块盒，因此严格来说，这个块盒应该不属于IFC区域内
那么这个块盒应该属于哪里呢？ 合理的解释应该是：他存在于它的上一层--span元素外面的一个BFC区域
BFC内部
BFC内部在默认情况下应该继续按照上面所讲的文档流的规则进行布局
