BFC块级格式化上下文IFC行内格式化上下文

简介

BFC（Block Formatting Contexts），块级格式化上下文。
IFC （Inline Formatting Contexts），行内格式化上下文。

1、BFC

规则

属于同一个BFC的两个相邻Box垂直排列
属于同一个BFC的两个相邻Box的margin会发生重叠
BFC的区域不会与float的元素区域重叠
计算BFC的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围

条件

根元素（body);
浮动元素， float属性不为none;
定位元素，position为absolute或fixed；
display为inline-block，table-cell，table-caption，flex;
overflow不为visible（即值为hidden/auto/scroll时）;

作用

解决margin重叠问题（添加独立BFC)
解决浮动高度坍塌问题（在父元素添加overflow:hidden）
解决侵占浮动元素的问题（添加overflow:hidden）

2、IFC

规则

在一个行内格式化上下文中，盒子是一个接一个水平放置的，从包含块的顶部开始
这些盒之间的水平margin，borer和padding都有效
盒可能以不同的方式竖直对齐：以它们的底部或者顶部对齐，或者以它们里面的文本的基线对齐

3、块盒，行盒（行内元素），行块盒（行内块元素）的区别

块盒元素

display: block;
常见元素：div、p、h1~h6、header、footer、nav、hr、ul、ol、dl等
特点：独占一行；可以设置宽高；宽度是父元素的100%；里面可以嵌套块级元素和行内元素；

行盒（行内元素)

display: inline;
常见元素：span、a、img、br、label、strong、em、audio、video、b、i等
特点：不会独占一行；不能设置宽高；宽度等于内部宽度；不允许嵌套块级元素；display为inline；a标签比较特殊可以嵌套块级元素，将a标签转换为块级元素

行块盒（行内块元素)

display: inline-block;
常见元素：input、button
特点：块级元素和行内元素的结合；可以设置宽高；宽度等于内容宽度’；不会独占一行；

特殊元素

img元素：默认disaplay为inline；但既有块盒效果也有行和效果：可以设置宽高；不会独占一行

参考

https://blog.csdn.net/qq_41996454/article/details/108903784
IFC(行内格式化上下文) ：https://www.jb51.cc/webfrontend/454409.html
行内格式化上下文（Inline Formatiting Contexts） https://segmentfault.com/a/1190000009308818
区别css，块盒，行盒（行内），行块盒（行内快）的不同：https://blog.csdn.net/dccose/article/details/105731673