【读CSS规范】挨着float的行盒的一个问题

问题描述

问 题

A line box is next to a float when there exists a vertical position that satisfies all of these four conditions: (a) at or below the top of the line box, (b) at or above the bottom of the line box, (c) below the top margin edge of the float, and (d) above the bottom margin edge of the float.

请问这里的a vertical position描述的是怎样的一种位置？
可以的话，请附图说明，感谢！！！

解决方案

这段话应该是定义了两个词 next to 和 vertical position，后者是为了定义前者而存在的。

规范的定义都要求这样，给出明确的要求，如果给出一个东西可以根据这些要求它证明是否符合这个定义，但不太要求人能更容易的理解。

"vertical" 是指屏幕y轴的方向（屏幕的竖直方向）,可能就是下面四个条件都只与y轴有关，所以取了这么一个名字。

如果说一个行框next to一个浮动元素，则存在一个点，这个点:1、在这个行框的上边界之下(可以等于)，2、在这个行框的下边界之上，3、在这个浮动元素的下边界(margin边界)之上(不能取等于)，4、在这个浮动元素的上边界之下。这个点就叫做vertical position，当然可以存在多个满足条件的点。

直白但是不严谨的说是，行框和这个浮动元素在"垂直方向"的"交集"不为空,则这个行框next to那个浮动元素，其"交集"中的任何一个点都可以作为vertical position

比如，盗楼上一个图，前三行都可以找到一个"空间"(直接标识点不太明显)，这个"空间"内的点都可以作为vertical position，所以前三行都可以说是next to那个浮动的元素，而第四行就找不到这样一个点。

所以下面有一个note,说高度<=0的浮动元素不会缩短行框(行框不next to这个浮动元素，因为浮动元素高度<=0,任何空间/点都不满足3 4条)

这篇关于【读CSS规范】挨着float的行盒的一个问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！