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

Question

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描述的是怎样的一种位置？
可以的话，请附图说明，感谢！！！

Answer 1

这段话应该是定义了两个词 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条)

Answer 2

我说下自己的想法，不一定正确。浮动原本的作用是用来实现文字环绕。如下图：当一张图片左浮动后，紧跟的多行文字需要一个标准来决定一行文件是完全换行从头显示，还是紧跟着浮动的图片显示。浮动的图片高100px（每行文字40px），仍然有空间去部分容纳第三行文字（满足上面所述的四个条件），因此它会紧跟着浮动图片。而在第四行文本布局时，第一个条件都不满足，因此完全换行。

Answer 3

由条件a和b可知，这个位置在行框的上边界和下边界之间；
由条件c和d可知，这个位置在浮动元素的上外边界和下外边界之间；
所以要想在垂直方向上有满足这四个要求的点，则行框和浮动元素在垂直方向上相交，也就是在垂直方向上有重叠的部分。