CSS：调整元素大小而不是清除浮动

Question

我有一个包含图像的框，该图像具有float：left设置和文本内容。

-------------------------------------
|---------                           |
||       |                           | 
|| Image |                           |
||       |       Content             |
|---------                           |
|                                    |
|                                    |
|                                    |
--------------------------------------
                                Fig. 1

我通常认为让内容围绕图像浮动是很好的。 但是，在使用列表的情况下，以下外观令人讨厌：

-------------------------------------
|---------                           |
||       |   List                    | 
|| Image |                           |
||       |   1. Item                 |
|---------   2. Item                 |
|  3. Item                           |
|  4. Item                           |
|                                    |
--------------------------------------
                                Fig. 2

我希望采用以下方式（至少对于相当短的列表，让我们假设列表目前很短）

-------------------------------------
|---------                           |
||       |   List                    | 
|| Image |                           |
||       |   1. Item                 |
|---------   2. Item                 |
|            3. Item                 |
|            4. Item                 |
|                                    |
| Additional content (not in list)   |
--------------------------------------
                                Fig. 3

通过使列表display: inline-block我得到了上面的外观display: inline-block （并在列表之前插入<br>或将其包装在块级元素中）

但是，如果有任何长列表项（长于内容字段的小宽度），则清除浮点数。

-------------------------------------
|---------                           |
||       |                           | 
|| Image |                           |
||       |                           |
|---------                           |
| 1. Item                            |
| 2. A very long item, which makes   |
|    the list box just as wide as the|
|    outer box.                      |
| 3. More items                      |
-------------------------------------|
                                Fig. 4

为什么发生这种情况在我看来很清楚。 在浮动环境中，首先，使用外部框的宽度作为环境宽度，将列表呈现为一个块（由于display: inline-block ）。 由于物品很长，因此块的宽度将与外盒一样宽。 在第二步中，尝试将块适配到不适合浮动图像的位置。 最后，清除浮点数。

有什么办法可以改变这种情况？ 像，首先尝试以更短的宽度呈现列表，如果失败，重新呈现？ 还是完全不同的方式来实现我想要的？

Answer 1

将列表放在DIV ，该DIV也以定义的宽度向左浮动。

Answer 2

尝试一个简单的overflow:hidden在您的列表中-这可以解决问题。

参见示例 。