文本环绕浮动div但边框和 s do not

Question

我有一个div是float: right，它在父div中。在同一个父div中也有p元素，文本正确地包围float: right div。

但是，如果我将p元素设置为具有边框，或者执行<hr />，则边框不会停止文本停止的位置，而是延伸到float: right div后面。

这是一个美丽的mspaint描述的情况：

请注意，黑色水平线的绿色部分位于浮动div的后面。

我如何获得边框或<hr />或其他任何东西只有文字宽，而不是在div后面？

Answer 1

我知道这个问题是前一段时间发布的，但我今天遇到了同样的问题并找到了另一个解决方案：

我使用border-bottom而不是<hr />标签，并且必须添加overflow: hidden;。看看小提琴，我认为这比接受的解决方案更有用，因为你也可以在水平线上添加一个边距，并且与文本有相同的间隙。

此外，您不需要定义z值，也不需要任何hacks或变通方法。

Answer 2

我以前遇到过这个问题，我不确定它是否可以解决。

但是，在你的情况下，你可以用另一个元素包装绿色框并用margin交换padding并将其背景设置为#fff以覆盖违规行。

Answer 3

看看小提琴......

我在这里做的是给浮动元素一个z-index CSS属性，它将它“置于”非浮动元素（具有较小值的z-index）之上，并且<hr />将不会超过浮动元素。

关于使它像文本一样宽，在我的例子中它与文本一样宽，但我不确定它是否适用于浏览器（我在Chrome上）。如果没有，请告诉我。

我希望这有帮助。斯托伊奇

附：优秀的mspaint技巧:)

Answer 4

您必须将段落的宽度设置为容器的宽度减去浮动元素的宽度，或者您可以在浮动的同一侧为它们设置一个等于浮动宽度的边距。

Answer 5

Div不能包裹另一个div。环绕是纯文本属性。您可以通过将主div的margin-right设置为您想要包装的div的宽度来模拟包装，但文本不会在inset div下流动。