我有一个div是float: right，它在一个父div中。在同一个父div中也有p元素，文本正确地环绕float: right div。但是，如果我将p元素设置为具有边框，或者执行<hr />，则边框不会在文本停止的地方停止，而是延伸到float: right div后面。下面是对当时情况的一个漂亮的简要描述：
float: right
p
<hr />
注意黑色水平线的绿色部分在浮动div后面。我怎样才能让边框或者<hr />或者其他什么东西和文本一样宽，而不至于到div后面去？
fjaof16o1#
我知道这个问题是前一段时间发布的，但我今天遇到了同样的问题，并找到了另一种解决方案：http://jsfiddle.net/MvX62/我用border-bottom代替了<hr />标签，并且不得不添加一个overflow: hidden;。看看小提琴，我认为这比公认的解决方案更有用，因为你也可以在水平线上添加一个边距，并且有相同的间隙，就像文本一样。此外，您不需要定义z值，也不需要任何技巧或解决方法。
border-bottom
overflow: hidden;
yuvru6vn2#
我以前遇到过这个问题，我不确定它是否可以解决。但是，在您的情况下，您可以用另一个元素 Package 绿色框，用padding交换margin，并将其背景设置为#fff以 * 覆盖 * 有问题的行。
padding
margin
#fff
c8ib6hqw3#
看看小提琴...http://jsfiddle.net/UnsungHero97/8BwGB/3/我在这里所做的是给浮动元素一个z-index CSS属性，它将把它放在非浮动元素（z-index的值较小）的"上面"，而<hr />不会放在浮动元素的上面。至于让它和文本一样宽，在我的例子中，它和文本一样宽，但我不确定这是否适用于所有浏览器（我用的是Chrome），如果不适用，请告诉我。希望这能帮上忙。赫里斯托pidoss.优秀的mspaint技能：）
z-index
zbsbpyhn4#
您必须将段落的宽度设置为容器的宽度减去浮动元素的宽度，或者您可以在浮动的同一侧给予它们一个等于浮动宽度的边距。
edqdpe6u5#
Div无法环绕另一个div。环绕是纯文本属性。您可以通过将主div的右边距设置为要环绕的div的宽度来模拟环绕，但文本不会在插入div下流动。
3npbholx6#
overflow属性的某些值可能会导致此行为。特别是overflow: visible，它通常由流行的CSS重置/规范化设置。
overflow
overflow: visible
6条答案
按热度按时间fjaof16o1#
我知道这个问题是前一段时间发布的，但我今天遇到了同样的问题，并找到了另一种解决方案：
http://jsfiddle.net/MvX62/
我用
border-bottom代替了<hr />标签，并且不得不添加一个overflow: hidden;。看看小提琴，我认为这比公认的解决方案更有用，因为你也可以在水平线上添加一个边距，并且有相同的间隙，就像文本一样。此外，您不需要定义z值，也不需要任何技巧或解决方法。
yuvru6vn2#
我以前遇到过这个问题，我不确定它是否可以解决。
但是，在您的情况下，您可以用另一个元素 Package 绿色框，用
padding交换margin，并将其背景设置为#fff以 * 覆盖 * 有问题的行。c8ib6hqw3#
看看小提琴...
http://jsfiddle.net/UnsungHero97/8BwGB/3/
我在这里所做的是给浮动元素一个
z-indexCSS属性，它将把它放在非浮动元素（z-index的值较小）的"上面"，而<hr />不会放在浮动元素的上面。至于让它和文本一样宽，在我的例子中，它和文本一样宽，但我不确定这是否适用于所有浏览器（我用的是Chrome），如果不适用，请告诉我。
希望这能帮上忙。
赫里斯托
pidoss.优秀的mspaint技能：）
zbsbpyhn4#
您必须将段落的宽度设置为容器的宽度减去浮动元素的宽度，或者您可以在浮动的同一侧给予它们一个等于浮动宽度的边距。
edqdpe6u5#
Div无法环绕另一个div。环绕是纯文本属性。您可以通过将主div的右边距设置为要环绕的div的宽度来模拟环绕，但文本不会在插入div下流动。
3npbholx6#
overflow属性的某些值可能会导致此行为。特别是overflow: visible，它通常由流行的CSS重置/规范化设置。