FC（Formatting Context）格式化上下文—— 一个渲染区域，拥有一套渲染规则，它决定了其子元素如何定位，以及与其他元素之间的关系和相互作用。
IFC布局——行内格式化上下文
inline formatting context
触发IFC的方法
块容器盒内不包括任何块级盒，即块容器盒（html行内块级标签或块级标签）内全是行内盒（html内联标签）
IFC布局的特点
- 行内盒水平排列为一行，当容器宽度不够时就会换行
- 每一行都会生成一个行盒（见触发IFC的方法中的配图），内部包括该行所有的盒子
- 行盒的宽度由包含块和存在的浮动来决定
- 行盒的高度由内部元素中实际高度最高的元素计算出来
- 水平方向上行内盒的外边距、边框、内边距所占用的空间都会被计算，但垂直的border，padding 与 margin 都不会撑开行盒的高度
- 水平方向的对齐通过 text-align 来设置，默认对齐为left 左对齐（当所有盒的总宽度小于行盒的宽度时）
- 垂直方向的对齐通过 vertical-align 来设置，默认对齐为 baseline 基线对齐（当最高的行内盒的高度小于行盒的高度时）
- 当所有盒的总宽度超过一个行盒时，就会形成多个行盒，多个行盒相互之间垂直方向不能分离，不能重叠
- 行盒一般左右边都贴紧其包含块，但是会因为浮动盒（float 元素）的存在而发生变化。浮动盒会位于包含块边缘与行盒边缘之间，这样行盒的可用宽度就小于包含块的宽度
- 当一个行内盒超过行盒的宽度时，它会被分割成多个盒，这些盒被分布在多个行盒里。如果一个行内盒不能被分割（比如只包含单个字符，或word-breaking机制被禁用，或该行内框受white-space属性值为nowrap或pre的影响），那么这个行内盒将溢出这个行盒
BFC布局——块级格式化上下文
block formatting context
形成一块独立的渲染区域，内部元素的渲染不会影响外部元素，也不会被外部元素影响
触发BFC的方法
满足以下任意一个条件即可
- html根元素；
- float的值不为 none；
- overflow的值不为 visible （即值为auto / scroll / hidden【推荐】）
- display的值为 flex / inline-block / table-cell / table-caption
- position的值为 absolute / fixed
BFC布局的特点
- 不会发生margin重叠
- 可以清除浮动
- 实现更健壮、更智能的自适应布局
应用范例
<div class="container bfc"> <img src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF" class="left" style="magin-right: 10px;"/> <p class="bfc">某一段文字……</p> </div>
.container { background-color: #f1f1f1; } .left { float: left; } .bfc { overflow: hidden; /* 触发元素 BFC */ }
