如何在不隐藏部分 DIV 的情况下使用 CSS 浮动答案

【问题标题】：How to use CSS float without hiding parts of a DIV如何在不隐藏部分 DIV 的情况下使用 CSS 浮动
【发布时间】：2013-04-20 09:58:52
【问题描述】：

当一个 DIV 上使用 CSS 浮动时，其他没有浮动的 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 下方蔓延。这种效果可能吗？

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

这是我得到的：

这就是我想要的：

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

【问题讨论】：

我想奖励明确指出不可能的答案，因为这个答案（结束了辩论）没有足够的关注，并且获得最高票数的回应......没有回答问题......虽然它提供了有价值的信息
@SamuelRossille：我不确定我在这里缺少什么（上面的图片不再显示所需的内容）。我在接受的答案（目前是柯克沃尔的答案）下发布了一些小提琴链接，这似乎表明 cletus 的答案是正确的（文本仍然包裹在正确的浮动下）。可能在旧版浏览器中存在不同的行为（此主题已有三年多的历史了）。
@ScottS，是的，对不起。那是在 SO 没有自己的内部图像托管解决方案的糟糕时代。我查看是否可以恢复这些图像，但无济于事。
@KirkWoll：这是可以理解的。你能在你的回答下评论我的 cmets 吗？我不知道您想要实现什么（希望您还记得很久以前），但似乎 cletus 的答案实际上就是您所寻求的（至少现代浏览器解释它）。但我可能会在这里遗漏一些东西。

标签： html css layout positioning css-float

【解决方案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：

修复相邻框

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

此问题的修复来自非常隐蔽的段落 floats section 的 CSS 2.1 规格：

表格的边框，一个块级替换元素，或正常流程中的元素建立一个新的block formatting context（例如一个带有 '可见'以外的'溢出'）必须不重叠任何浮动块格式化上下文作为元素本身。

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

浮动

绝对定位

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

已将其溢出属性设置为可见以外的内容。

最后一个选项是在大多数情况下最容易做到：设置溢出：我们段落上的自动将创建一个新的“块格式上下文”，并渲染段落边框在正确的位置。

【讨论】：

谢谢，但是这不允许在浮动 div 完成时将“左”列中的文本换行到右侧的空间中。
没有什么允许的。您可以将文本环绕在右侧的浮点数上，但这也会将块元素扩展到右侧。根据定义，块元素是一个正方形，您似乎想要一个右上角切掉的正方形，并且边框跟随该线。做不到。
这是我所担心的，但感谢您明确指出。 :)
为我工作，@cletus。谢谢！

【解决方案2】：

如果你在你的div 中添加一个span 并设置这样的样式（当然，我通常不会使用内联样式）：

<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。请注意，div 本身上的 overflow:hidden 是为了适应长文本字符串的换行。

【讨论】：

这是我在提出问题时正在寻找的实际答案。干得好。
我很高兴能够给你你想要的东西（即使两年后）。
迟到总比不到好！ :)
@KirkWoll 请记住，如果文本变得足够长以至于需要换行，它将破坏布局，因为它将移动到右框下方jsfiddle.net/gaby/MS5z5/2
@GabyakaG.Petrioli：实际上，只需将overflow: hidden 添加到包装器div 即可解决换行问题。我已将上述答案中的小提琴链接更新为this revised solution，并显示了代码更改。

【解决方案3】：

看来这根本不可能像我希望的那样。正如 Cletus 解释的那样，“没有什么允许的。您可以将文本环绕在右侧的浮点数上，但这也会将块元素扩展到右侧。根据定义，块元素是一个正方形，您似乎想要一个带有顶部的正方形右切出和边界跟随那条线。做不到。

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

【讨论】：

也许我遗漏了什么，但@Cletus 的答案似乎在this fiddle 和this one 中如您所愿。
@ScottS，嗯，你第二条评论中的小提琴正是我一直渴望的。如果您将其发布为答案，我很乐意将其标记为正确答案。（事实上，如此很高兴，我也很想奖励它——这不正是我们正在寻找的吗，塞缪尔？）
根据我在第二条评论中的小提琴添加了一个答案。

【解决方案4】：

您应该将另一列指定为向左浮动。您现在拥有它的方式是左侧的文本将包裹右侧的浮动文本。指定左侧浮动对象的大小也是明智之举。

<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，它将使这段代码更容易长期维护

编辑：我以为您希望所有内容都向左浮动我想我误解了您的问题。你试图做的事情是不可能的。您可以做的最好的事情是指定向右浮动的对象的边距等于 400-150 (250px)，或者指定“一些文本”对象的宽度等于 (250px)。

【讨论】：

谢谢，但是这不允许在浮动 div 完成时将“左”列中的文本换行到右侧的空间中。
另外，在堆栈溢出问题中使用样式表会让我觉得没有帮助。 :)
好的，感谢您的回复。有关为什么这是不幸的示例，请查看此维基百科文章：en.wikipedia.org/wiki/Automata-based_programming。您会注意到“传统（命令式）程序”示例被一个令人愉悦的框包围，就像我在这里试图描述的那样。可悲的是，他们遇到了完全相同的问题，您会注意到框的右边缘完全丢失，因为它在右侧有用的浮动导航 div 下方被遮挡了。有时 HTML/CSS 会让耶稣哭泣。
哈哈，很抱歉，我无法提供更多帮助。与任何编程语言一样，总会有限制。如果没有，我们将使用一种编程语言来做所有事情。祝你好运:)

【解决方案5】：

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

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

应该可以的。

编辑：根据您的编辑，我建议您使用 span（内联元素）而不是 div（块元素）。如果您总是需要将它放在单独的行上，则可以将该元素及其后面的元素都指定为 clear:left。

【讨论】：

这可能会起作用，但这意味着每次我想要一个红色的小信息框时，我都必须明确指定宽度。听起来很痛苦。
感谢您的回复，但很遗憾，您无法将宽度拉伸到周围文本的边界。即边框和背景颜色只会围绕您键入的文本（在“一些示例文本”中的“文本”末尾停止），但不会一直填充到右边缘（浮动 div 的开头出现的位置） .

【解决方案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

【讨论】：

仅供参考 - 如果您阅读了 Bounty 消息：作者创建它是为了奖励接受的答案，而不是仍在寻找答案。
@Jesse- 是的！我知道，所以我说来晚了。但是答案会对未来的读者有所帮助，这就是我回答的原因。