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在您的列表中-這可以解決問題。

參見示例 。