Html 如何在不隐藏DIV部分的情况下使用CSS float_Html_Css_Layout_Positioning_Css Float

Html 如何在不隐藏DIV部分的情况下使用CSS float

html css layout

Html 如何在不隐藏DIV部分的情况下使用CSS float,html,css,layout,positioning,css-float,Html,Css,Layout,Positioning,Css Float,当CSS float用于一个DIV时，其他未浮动的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

当CSS float用于一个DIV时，其他未浮动的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粘贴到浏览器中（或检查其），您会注意到“一些示例文本”是红色的，并且红色背景一直延伸到浮动的DIV。虽然我确信有一种方法可以模糊红色背景中我不想要的部分，但它仍然会将边框裁剪掉并隐藏在DIV下面。理想情况下，我希望背景颜色和边框只占用有效的文本空间，而不是在浮动的DIV下面爬行。这种效果可能吗

请注意，我使用float属性并不是作为列的替换，而是作为一个文本流环绕的块。到目前为止，提议的解决方案都没有考虑到这一点。为了清晰起见，这里有一些图片

这就是我得到的：

这就是我想要的：

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

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

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

应该这样做

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

您应该将另一列指定为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，这将使该代码更易于维护长期

。这里有一个解决方案：

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

一些示例文本

基本上，这里的魔法是

溢出：隐藏，它改变了CSS视觉格式模型。看看：
固定相邻的箱子
让我们看看红色的段落边框
问题第一。原因是
段落边框出现在
图像是因为浮标不存在
重新定位已删除的块框
与他们相邻。在本例中
浮动图像只是在推直线
段落中的方框。所以
文本被推到右侧，但是
实际的段落框仍然存在
延伸到道路的整个宽度
容器
此问题的解决方案来自
很好的隐藏在
CSS 2.1的功能
规格：
一张桌子的边框框，一张桌子
块级替换元素，或
正常流量中的元素
建立一个新的（例如具有
“溢出”而不是“可见”）必须
不重叠同一区域中的任何浮动
块格式化上下文作为
元素本身
所以为了防止我们的段落阻塞
与浮动内容重叠时
解决方案是创建一个“新块”
CSS中的“格式化上下文”
规范作者术语。
听起来很棘手，是吗？幸运的是，它
这不难吗。新块格式
上下文由任何块创建
符合这些标准的：

浮动
绝对定位
具有一个或多个不寻常味道的显示属性值
（内联块、表格单元格等）
将其溢出属性设置为不可见的内容

最后一个选项是
在大多数情况下最容易做到：设置
溢出：自动在我们的段落将
创建新的“块格式”
“上下文”，并呈现该段
边界在正确的地方
看来这根本不可能像我所希望的那样。正如Cletus所解释的，“没有什么允许这样做。你可以将文本环绕在右浮点上，但这也会将block元素向右扩展。根据定义，block元素是一个正方形，而你似乎想要一个带有顶部装备的正方形
<div style="overflow: hidden;">
  <span style="background-color:red;
               border:thin black solid;
               display: inline-block;">
   Some sample text
   </span>
</div>

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