深入理解流体框、矩形框、浮动

盒子模型是描述html元素在文档布局上、空间占据情况的一种模型。

盒子模型的核心是：元素实体大小、内填充大小、边框大小，外补白大小

我们一般关心的是元素实体大小和最终大小（外补白边缘到边缘确定的距离）

盒模型类型可分为：流体框、矩形框

裸文本：没有行内元素包裹的文字、图片等

裸文本或者裸文本外有行内元素作为包裹层时都会形成流体框。

流体框的特征是大小完全由实体元素撑起，不能设置宽高，但可以通过内填充和外补白来影响宽度。

矩形框特征：略

流体框和矩形框的关系：流体框位于矩形框之上，矩形框承载流体框

浮动：

元素设置浮动属性，就意味着放弃矩形框（如果有矩形框），也就失去矩形框的文档空间占据

但是！没有放弃流体框，流体框也不可能被放弃！

具体过程：元素放弃矩形框后，后续元素自然而然地占领其矩形框空间，元素原有的流体框和后续元素的流体框按行内元素的排版规则进行自适应调整。