CSS 【文档流 BFC块级格式化上下文】学习笔记

1. 文档流

文档流分为定位流、浮动流、普通流三种。

普通流指FC（Formatting Context）格式化上下文。它是页面中的一块渲染区域，有一套渲染规则，决定子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC（行内格式化上下文），还有GFC和FFC。

块级元素： CSS 属性值 display 为 block，list-item，table 的元素。
独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。
每个块级元素都会至少生成一个块级盒，称为主块级盒；一些元素可能会生成额外的块级盒，比如 < li >，用来存放项目符号

行内级元素：CSS 属性值 display 为 inline，inline-block，inline-table 的元素。
可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。

行内块元素(inline-block)：结合的行内和块级的优点，既可以设置长宽，可以让padding和margin生效，又可以和其他行内元素并排。
img、input为行内块元素
所有的非可替换行内元素（display 值为 inline-block 或 inline-table）生成的盒称为原子行内