如何使用CSS float而不隐藏DIV的部分
Kir*_*oll 5 html css layout positioning css-float
当在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下面爬行.这种效果可能吗？
请注意,我使用float属性不是作为列的替代,而是作为一个块,它将使文本在其周围流动.到目前为止,所提出的解决方案都没有考虑到这一点.为清楚起见,这里有一些图像.
这就是我得到的:
这就是我要的:
您会注意到,在两个示例中,当文本到达底部时,最终文本环绕浮动部分.我可以通过直接指定包含"Some sample text"的div的宽度来实现我的第二个例子.我不想指定宽度.这似乎是多余的,因为我想要与它周围的文本相同的宽度.但也许这是不可能的？
这是一个解决方案:
<div style="background-color:red;border:thin black solid;overflow:hidden;">Some sample text</div>
基本上这里的魔力是overflow: hidden改变CSS视觉格式化模型.看看CSS布局基础知识,第5部分:浮点数:
固定相邻的盒子
我们先来看看红色边框问题.段落边框出现在图像后面的原因是浮动不会重新定位与它们相邻的块框.在此示例中,浮动图像仅推送段落内的行框.因此文本被推向右侧,但实际的段落框仍然在容器的整个宽度上延伸.
这个问题的解决方案来自CSS 2.1规范的浮点部分中一个非常隐蔽的段落 :
表的边框,块级替换元素或正常流中建立新块格式化上下文的元素(例如"溢出"除"可见"之外的元素)不得与任何浮点重叠.与元素本身相同的块格式化上下文.
因此,为了防止我们的段块与浮动内容重叠,解决方案是在CSS规范作者术语中创建"新块格式化上下文".听起来很棘手,是吗？幸运的是,并不难.任何符合以下条件的块都会创建新的块格式化上下文:
- 漂浮
- 绝对定位
- 有一个更不寻常的风格的显示属性值(内联块,表格单元格等)
- 将其overflow属性设置为除可见之外的其他内容.
最后一个选项是在大多数情况下最容易做到的选项:设置溢出:我们段落上的auto将创建一个新的"块格式化上下文",并在正确的位置呈现段落边框.
如果你添加一个像span你div这样的风格(当然,我实际上通常不会使用内联样式):
<div style="overflow: hidden;">
<span style="background-color:red;
border:thin black solid;
display: inline-block;">
Some sample text
</span>
</div>
然后你可以在这个小提琴中看到这个效果.需要注意的是,overflow:hidden在div本身是适应长文本字符串换行.