消除分区下的空白浮动到右侧答案

【问题标题】：Eliminating white space under a division floated to the right消除分区下的空白浮动到右侧
【发布时间】：2014-02-16 08:44:40
【问题描述】：

我正在尝试消除浮动到右侧的分区下方的空白。

我的意图是定义一个分区，我可以将其放置在页面的任何位置并使其浮动到右侧。一个按钮将扩展分区 - 增加它的高度和宽度 - 以允许读取分区。为了简化示例，我省略了所有这些处理。

我已经让它浮动了——这很简单，只需编写代码 float: 对；使用 CSS。问题是，如果我没有为分区指定高度，则会在分区下方获得额外的空白。如果我将高度设置为在分区下方没有空白，则按钮会延伸到分区边框下方。

鲍勃

【问题讨论】：

设置高度：浮动分区上的 100% 不会导致结果发生变化。
我看不到您链接到的页面上的问题如何适用于此问题。考虑到该问题，将对示例页面上的代码进行哪些更改。
以上 cmets 是针对 Zach Saucier 发布的答案的回应，如有任何混淆，请见谅。
Zack 似乎删除了他的答案 - 我不知道你可以这样做。
TLindig 建议（在聊天中）使用负的底部边距，这很有效。我将其设置为 -4px 并删除了额外的空白。我还将左边距设置为 4px，将左边距设置为 4px，以更好地格式化整个内容。

【解决方案1】：

你得到了空间，因为右浮动的div 比一行文本高。所以需要两行。

如果div 应该保持在线，则将文本包装在一个新的div 中并在其上设置clear=both。

更新关注 cmets 中的对话：

如果您不想更改标记，您可以在您的div 上使用position:ablsolute，并将其定位为top:1em（或任何您想要的）和right:0。文本和标题的容器也需要样式：position:relative。

更新

使用负数margin-bottom，您可以降低div 所需的高度。

【讨论】：

浮动的 div 在 div 中没有显示两行。问题是 div 下方的额外空间。看看这两个例子。浮动 div 完全一样，期望一个具有高度：18px，另一个没有指定高度。您的示例将要求我在每个框之前和之后编写一个除法。其目的是仅在页面上的任何位置插入浮动分区，而无需更改页面上已有的任何内容。
好吧，我换个说法。 div 大于一行文本。所以它不适合一行。因此文本不会在 div 下浮动。
你可以使用：位置：绝对。这是一个例子：jsbin.com/hujax/2
为什么说分割高于一行文字——你是说分割有边界吗？去掉第二个例子的边框不会导致任何变化，如果我将按钮缩小到小于文本的高度，它在除法下方仍然有额外的空白。
你能改变你的例子，使用绝对位置在分割下有一行文本吗？它目前的格式是在其下方没有任何文本行，以查看您的建议是否在预期的方法中有效。