聊聊css布局
从normal flow说起
我们知道,书本印刷的排版是从上而下,从左到右,一行装不下换行,依次排列的规则,css中正常流也是这种规则。不同的是,css标准中有格式化上下文的概念。
Css标准中,规定如何排布文字或盒的算法,这个算法依赖一个排版的“当前现状”,css把这个当前状态称为“格式化上下文”。
格式化上下文又分为块级格式化上下文和行内级格式化上下文。块级格式化上下文从上到下依次排列,行内级格式化上下文从左到右依次排列,排不下换行。
所以,遇到一个元素需要排版,一般有以下三种情况: * 遇到块级盒,排入块级格式化上下文 * 遇到行内级盒或文字,排入行内级格式化上下文,排不下创建一个行盒排版,行盒会创建一个行内级格式化上下文。(行盒是块级,所以又到上一种情况) * 遇到float盒,将float盒的顶部盒当前行内级上下文上边缘对齐,float方向的那条边对齐,重新排版