我有一个窘境.我有一个应用程序,其中CSS似乎做它应该做的,但没有显示你期望的结果,我找不到解决方案来获得“预期”的结果.问题是当内容左侧有浮动元素且内容样式使用填充或边距时内容如何流动.

在我的应用程序中,用户可以在DIV中输入文本.可能存在或不存在浮动左元素,使得具有文本的div可以位于主体区域的左侧或者向右移位(即,在浮动元素之后).

当没有浮动元素时,文本可以使用左侧,缩进,第一行缩进或悬挂的段落(即带有div和适当的类).

这些段落的CSS是：

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

但是,当添加一个浮动左元素时,只有标准和第一个缩进显示正确.这是因为填充,边框和边距在框模型“内容”之外,并且“内容”区域中的项目仅针对浮动进行调整.

Floats. In the float model, a box is first laid out according to the normal flow, then >taken out of the flow and shifted to the left or right as far as possible. Content may
flow along the side of a float.

如果你使用Firefox和Firebug,你可以突出显示div,你会发现填充显示在左边缘,即浮动元素的“下面”,没有调整到浮动元素的右边.

因此,带有float left元素的段落如下所示：

(请注意,float元素也会影响列表的显示.)

到目前为止,我还没有能够提出一个CSS解决方案,让我设置主要文本内容,然后让它们正确显示左边是否有浮动元素.

我已经发布了完整的HTML示例,因此请随时查看源代码,看看您是否能找到解决方案！ Sample Page

谢谢 – 我应该包括“你期望的”.这里是左边的浮子和左边的浮子.

最佳答案 要更正,请设置overflow：隐藏在所有段落元素(和列表等)上
See fiddle.