Question

当在DIV上使用CSS float时，其他未浮动的DIV继续占用浮动DIV的空间。虽然我确信这是故意的，但我不知道如何达到我想要的效果。请考虑这个例子：

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam.</div>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red;border:thin black solid">Some sample text</div>

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>

</html>

如果您将此HTML粘贴到浏览器中（或检查其jsfiddle），您会注意到“某些示例文本”为红色，并且红色背景一直延伸到浮动的DIV。虽然我确信有一种方法可以遮挡我不想要的红色背景部分，但它仍会将边框裁掉并隐藏在DIV下方。理想情况下，我希望背景颜色和边框仅占用有效的文本空间，而不是在浮动的DIV下面爬行。这种效果可能吗？

请注意，我使用的浮动属性不是作为列的替代，而是作为一个将文本围绕它的块。到目前为止，所提出的解决方案都没有考虑到这一点。为清楚起见，这里有一些图片。

这就是我得到的：

Bad

这就是我想要的：

Good

您会注意到，在两个示例中，当文本到达底部时，最终文本会在浮动部分周围进行包装。我可以通过直接指定包含“Some sample text”的div的宽度来实现我的第二个例子。我不想指定宽度。这似乎是多余的，因为我想要与它周围的文本相同的宽度。但也许这是不可能的？

Answer 1

这是一个解决方案：

<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>

这里的魔力基本上是overflow: hidden，它改变了CSS视觉格式化模型。看看CSS layout fundamentals, part 5: floats：

固定相邻的方框

让我们看一下红色的边框   问题首先。原因是   段落边框出现在后面   图像是因为花车没有   重新定位块框   与他们相邻。在这个例子中，   漂浮的图像只是推动线   段落里面的盒子。所以   文本被推到右边，但是   实际的段落框仍然是   横跨整个宽度延伸   容器

此问题的解决方案来自于   非常隐蔽的段落   CSS 2.1的floats section   规格：


桌子的边框，a     块级替换元素，或者     正常流量中的元素     建立一个新的block formatting context（例如一个元素     '溢出'除了'可见'之外）必须     不重叠同一个浮子     阻止格式化上下文     元素本身。


所以要阻止我们的段落阻止   重叠浮动的内容，   解决方案是创建一个“新块”   格式化上下文“，在CSS中   规范作者术语。   听起来很棘手，是吗？幸运的是，它   并不难。新块格式化   上下文由任何块创建   符合这些标准：


浮动

绝对定位

具有一种更不寻常的风味的显示属性值   （内联块，表格单元等）

将其overflow属性设置为除可见之外的其他内容。


最后一个选项是   在大多数情况下最容易做的事情：设置   溢出：我们段落上的auto会   创建一个新的“块格式   上下文“，并呈现段落   边界在正确的地方。

Answer 2

如果您在span中添加div并且风格如此（当然，我实际上通常不会使用内联样式）：

<div style="overflow: hidden;">
  <span style="background-color:red;
               border:thin black solid;
               display: inline-block;">
   Some sample text
   </span>
</div>

然后你可以获得this effect shown in this fiddle。请注意overflow:hidden本身的div是为了适应长文本字符串的换行。

Answer 3

看来这根本不可能像我希望的那样。正如Cletus所解释的那样，“没有任何东西允许这样。你可以在正确的浮动周围包裹文本，但也会将块元素扩展到右边。根据定义，块元素是一个正方形，你似乎想要一个顶部的正方形右边切出来，边界跟着那条线。不能这样做。“

（我赞成Cletus的答案，但不想将其标记为正确的“答案”，因为我相信未来的Google员工应该很快失望。）

Answer 4

您应该将另一列指定为float left。你现在拥有它的方式是左边的文本将包装右边的浮动文本。在左侧指定浮动对象的大小也是明智的。

<html>

<div style="width:400px">

<div style="width:150px;float:right;border:thin black solid">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim  veniam.</div>

     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. 

<div style="background-color:red; width: 250px; border:thin black solid">Some sample text

     Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div></div>

</html>

另外，考虑使用CSS，这将使这段代码更容易维持长期＆lt;＆lt;

编辑：我以为你想要把一切都浮到左边我觉得我误解了你的问题。你想要做的是不可能的。你可以做的最好的事情是指定向右浮动的对象的边距等于400-150（250px），或者指定“some text”对象的宽度等于（250px）。

Answer 5

我认为你只需要做一件事：

给“示例文本”div一个右边距，大于右浮动元素的宽度

应该这样做。

编辑：根据您的编辑，我建议您使用span（内联元素）而不是div（块元素）。如果你总是需要它在一个单独的行上，你可以给它后面的元素和元素：left。

Answer 6

我很晚才知道这个问题，无论如何我正在解决你的问题。见 Fiddle

您需要定义display: table;

这样：

<div style="background-color:red;border:thin black solid;display: table;">Some sample text</div>

注意 display: block;无法用作display: table;，您也可以使用display: table-cell;

您可能也喜欢这个问题：css inline-block vs table-cell

如何使用CSS float而不隐藏DIV的部分

6 个答案:

固定相邻的方框