格式化DIV在FLOAT左邊填充和列表的問題

Question

我有一個窘境。我有一個應用程序，CSS似乎在做它應該做的事情，但並沒有像預期的那樣顯示結果，我也找不到解決方案來獲得「預期」結果。問題在於，當內容左側存在浮動元素並且內容樣式使用填充或邊距時，內容如何流動。

在我的應用程序中，用戶可以在DIV中輸入文本。可能有或沒有左浮動元素，以便帶文本的div可以位於主體區域的左側，也可以位於右側（即在浮動元素之後）。

當沒有浮動元件，文字是用細段（即，具有的div和適當的類），其被留下的，凹陷的第一行縮進，或懸掛。

爲段落的CSS是：

.firstindent { text-indent:30px; } 
.indent { padding-left:30px; } 
.hanging { padding-left:30px; text-indent:-30px; } 

然而，當添加一個浮動左元素，只有標準和頭縮進顯示正常。這是因爲填充，邊框和邊距超出了框內模型的「內容」，並且只調整了「內容」區域中的項目。

浮動。在浮動模型中，首先根據正常流動佈置一個箱子，然後>從流動中取出並儘可能向左或向右移動。內容可能會沿浮標一側流動。

如果你使用Firefox使用Firebug，可以突出的div，你會發現，填充在左邊所示，即「下」浮動元素，沒有調整到浮動元素的右邊。

其結果是，有一個浮動左元素的段落是這樣的：

（注意float元素也影響列表的表現）

到目前爲止，我還沒有能夠想出一個CSS解決方案，它可以讓我設置主要的文本內容，然後讓它們正確顯示左邊是否存在左側浮動元素。

我已經發布了完整的HTML樣本所以請隨時扎破來源，看看你是否能找到一個解決辦法！ Sample Page

謝謝 - 我應該已經包括了「你所期望的」。這裏是左邊的浮球和左邊的浮球。

Answer 1

要糾正，會在您的所有段落元素overflow: hidden（和列表等）See fiddle。