当在一个DIV上使用CSS float时，其他没有 float 的DIV会继续占据 float 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 )，您会注意到“一些示例文本”是红色的，并且红色背景一直延伸到 float 的 DIV。虽然我确信有一种方法可以遮盖我不想要的红色背景部分，但它仍然会使边框被裁剪掉并隐藏在 DIV 下方。理想情况下，我希望背景颜色和边框只占据有效的文本空间，而不是隐藏在 float DIV 的下方。这种效果可能吗？
请注意，我使用的 float 属性不是作为列的替代品，而是作为一个让文本围绕它流动的 block 。到目前为止，没有一个提议的解决方案考虑到这一点。为清楚起见，这里有一些图片。
这是我得到的:
这就是我想要的:
您会注意到，在这两个示例中，当文本到达底部时，最终文本环绕 float 部分。我可以通过直接指定包含“一些示例文本”的 div 的宽度来实现我的第二个示例。我不想指定宽度。这似乎是多余的，因为我想要与其周围文本的宽度相同。但也许这是不可能的？
最佳答案
这是一种解决方案:
<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>
基本上这里的魔法是 overflow: hidden，它改变了 CSS 视觉格式化模型。看看CSS layout fundamentals, part 5: floats :
Fixing adjacent boxes
Let’s look at the red paragraph border problem first. The reason the paragraph border appears behind the image is because floats don’t reposition block boxes that are adjacent to them. In this example, the floated image is only pushing the line boxes inside the paragraph across. So the text is pushed to the right, but the actual paragraph box still stretches across the full width of the container.
The fix for this issue comes from a very well-hidden paragraph in the floats section of the CSS 2.1 specification:
The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with ‘overflow’ other than ‘visible’) must not overlap any floats in the same block formatting context as the element itself.
所以为了防止我们的段落阻塞 重叠 float 内容， 解决方案是创建一个“新 block 格式化上下文”，在 CSS 中 规范作者术语。 听起来很棘手，是吗？幸运的是，它 没那么难。新 block 格式 上下文由任何 block 创建 满足这些条件:
- float
- 绝对定位
- 具有一种更不寻常的 flavor 的显示属性值 (行内 block 、表格单元格等)
- 将其溢出属性设置为可见以外的其他内容。
最后一个选项是 在大多数情况下最容易做到:设置 overflow: auto 在我们的段落中会 创建一个新的“ block 格式 上下文”，并呈现段落 边框在正确的位置。
关于html - 如何在不隐藏部分 DIV 的情况下使用 CSS float，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/1567064/