visual formatting model (可视化格式模型）【持续修正】

• • Inline formatting contexts  行内级格式化上下文

在行内级格式化上下文中，框是在水平方向上一个接着一个的排列。他们之间的水平距离由padding、border、margin来决定。每一行的框都放在一个盒子里，这个盒子称为line box(行盒)。

行盒的高度总是能包含住它里面的框，除非用line-height属性强制规定它的高度。如果没有浮动的话，行盒的宽度由他包含的框的总宽度决定，如果出现浮动，行盒会变窄，为浮动让位。

• Relative positioning

框相对于在流内的位置移动，像是一个框精分成一个透明的自己，用于在流中占据位置，还有一个想去远方的自己，根据透明的自己进行定位，覆盖在流内的框之上。

精分是它个人的行为，不会对其他的框的位置产生影响。

• A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.
• If there is not enough horizontal room for the float, it is shifted downward until either it fits or there are no more floats present.
• Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist.
• the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

 浮动的框不在流内，它会尽量去靠左(右)，直到外边缘碰到包含框的边缘或是另一个浮动框的边缘。

 在流内的块框会当做浮动不存在一样垂直排列。

 行盒会缩短，给浮动框留出足够的位置。这就意味着，文字是会环绕在左浮动框的右侧的。

（编辑：网站开发网_马鞍山站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!