位置：浮动元素列表中的绝对值：意外行为

Question

我正在研究一个jsfiddle，试图提供this question的答案，但遇到了一些意想不到的行为。

• 我有一个浮动框列表（float:left），流过多行。
• 如果我将position:absolute添加到第一行的框中，它会保持在其位置（如预期的那样），但仅限于Chrome（不是FF）。
• 如果我将position:absolute添加到第二个/第三个/ ...行的框中，则该框位于包含div的外部。如果我add top:0和left:0到此框，则它位于包含div的左上角。这种情况发生在所有浏览器中。

由于我不知道如何解释/修复这种行为，我想知道是否有其他人知道发生了什么？

http://jsfiddle.net/hdX4w/

Answer 1

基于this实验，元素按预期位于包装器的顶部，但它们正在“浮动”元素之后“移动”，这些元素都位于它们应该的左侧。换句话说，绝对是因为左边的浮动使它们成为列表中的“最后”。

似乎与float: right相反，如here所示。

不知何故，浮动定位（在左侧场景中）是在浮动之后推动“流出”的绝对元素，当宽度为100px时，这会将元素“推到”框外“。注意如果使用较少的元素，绝对值就会落在浮点数​​后面，如here所示。

Answer 2

我提出了你所指的原始问题（而且我认为我将不得不使用一个表来解决它）...无论如何，我认为你在你的例子中看到意外行为的原因是因为我使用了img标签来创建框...如果你在CSS中的所有框（包括中小框）中添加“display：block”，它就会按预期运行。