文本环绕浮动div但边框和<hr /> s不包含

Question

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

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

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

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

如何获得边框或<hr />或其他任何内容仅与文本一样宽，而不是在div后面？

Answer 1

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

http://jsfiddle.net/MvX62/

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

此外，您无需定义z值，也不需要任何黑客或解决方法。

Answer 2

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

但是，在您的情况下，您可以使用其他元素包装绿色框并将margin与padding交换，并将其背景设置为#fff到封面违规行。

Answer 3

查看小提琴......

http://jsfiddle.net/UnsungHero97/8BwGB/3/

我在这里做的是给浮动元素一个z-index CSS属性，它将它“置于”非浮动元素（具有较小值z-index）和{{1}的“上方” }不会超过浮动元素。

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

我希望这会有所帮助 赫里斯托斯

P.S。优秀的mspaint技能：）

Answer 4

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

Answer 5

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