01、CSS布局
1.1、正常布局流(Normal flow)
正常布局流 就是不做任何布局控制，按照HTML的顺序（从左到右，从上而下）进行布局排列。网页基于盒子模型进行正常的布局，主要特点：
- 盒子布局：单个内容的布局，把内容放入盒子，加上盒子三件套（padding、boder、margin）。
- 块盒子纵向布局：块级元素单独一行，按照顺序垂直排列，并按其margin分离。
- 内联盒子水平布局：内联元素会在一行水平排列，高度、宽度都取决于内容，直到空间不足另起一行（换行）。高矮不齐，底部对齐。
- 边距折叠：垂直相邻元素的垂直
margin会保留最大的那一个，就是盒子的外边距折叠。 - 空白折叠：无论多少个连续空格、换行、tab，都会折叠为一个空格。
| 块元素 | 行内元素 | |
|---|---|---|
| 是否换行 | 独占一行，从新的一行开始，其后也另起一行 | 和其他行内元素在同一行 |
| 大小设置 | 元素的高、宽、行高、边距、对齐都可调整，宽度默认100% | 元素高、宽、外边距不可设置，根据内容自适应 |
| 包含元素 | 一般可包含其他行内元素和块元素 | 一般可包含其他行内元素，不可包含块元素 |
| 常见元素 | div，form、table，h1-h6，p，pre，ul/ol/li，dt/dl，hr，br | span，font，input，textarea，label，img，a，button，select |
| 盒子 | 块级盒子 (block box)：应用完整的盒子模型 | 内联盒子 (inline box)：部分盒子模型有效 |
- 还有一种混合型“行内块元素”属于行内元素的一种，和其他元素在一行，但元素的高、宽、外边距都可以设置，如
button、img、input。- 通过CSS样式的
display属性可以更改元素的布局类型，如可设置<a>为一个块元素布局display: block;
标准布局总是这样从左到右、从上而下的顺序排列。但当我们要实现一些特殊的的布局效果时就没法了，这时的办法就是 ——
标签：BFC,布局,盒子,元素,二脉,任督,inline,上下文 From： https://www.cnblogs.com/anding/p/16852112.html