CSS 如何在没有包装的情况下进行“浮动：左”？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5710417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to do a `float: left` with no wrapping?
提问by avernet
I have a container box1that has a certain width (which might change depending on its content). That box contains box2which has a fixed width (it could be an icon). Next to box2, I have box3with some text. I want the text to use all the space available to the right of box2. With the HTML pasted below, you get:
我有一个box1具有一定宽度的容器（可能会根据其内容而变化）。该框包含box2具有固定宽度的（它可能是一个图标）。在 旁边box2，我有box3一些文字。我希望文本使用box2.右侧的所有可用空间。使用下面粘贴的 HTML，您将获得：
So far so good. If the text gets longer, it doesn't wrap around box2(which is what I want), however, it doesn't make box1grow, which is my problem. You'll tell me "hey, if you made box3a position: absolute, how could you expect it to make box1grow?". Well, I don't but then, how can I get box3to show next to box2, use all the horizontal space available, and make box1grow if necessary? (Do I need to say that I'd like this work on IE6 onward, and to avoid using a table?)
到现在为止还挺好。如果文本变长，它不会环绕box2（这是我想要的），但是，它不会box1增长，这是我的问题。你会告诉我“嘿，如果你做box3了一个position: absolute，你怎么能指望它box1成长？”。好吧，我没有，但是，我怎样才能box3在 旁边显示box2，使用所有可用的水平空间，并box1在必要时进行增长？（我是否需要说我希望在 IE6 上进行这项工作，并避免使用表格？）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#box1 { position: relative }
#box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }
/* Styling */
#box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
#box2 { background: #999; padding: .5em; }
#box3 { background: #bbb; padding: .5em; }
body { font-family: sans-serif }
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="box1">
<span id="box2">2</span>
<span id="box3">3</span>
</div>
</body>
</html>
回答by Richard JP Le Guen
You need box 3 to be a block level element, so use display:blockand then toss in an overflow:hiddenin conjunction with float-ing box 2:
您需要框 3 作为块级元素，因此请使用display:block然后将 aoverflow:hidden与float-ing 框 2结合使用：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#box1 { }
#box2 { float:left; }
#box3 { display:block;overflow:hidden; }
/* Styling */
#box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
#box2 { background: #999; padding: .5em; }
#box3 { background: #bbb; padding: .5em; }
body { font-family: sans-serif }
</style>
<script type="text/javascript">
</script>
<title>How to do a `float: left` with no wrapping?</title>
</head>
<body>
<div id="box1">
<span id="box2">2</span>
<span id="box3">3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br />3<br /></span>
</div>
</body>
</html>
Amazing all the things overflow:hiddencan do :D
惊人的所有事情overflow:hidden可以做：D
回答by hesselbom
There are a couple of ways to achieve this. Two common ones is either to have an empty element right after with a clear: bothlike so (inline css just for demo):
有几种方法可以实现这一点。两个常见的方法是在一个clear: both像这样的元素之后立即有一个空元素（内联 css 仅用于演示）：
<span class="box1">...</span>
<br style="clear:both"/>
Another way is to use overflow: hiddenlike so:
另一种方法是overflow: hidden像这样使用：
<span class="box1" style="overflow: hidden">...</span>
However, there are problems with both of these solutions. With the first one you add unnecessary and ugly markup. And with the second if you want something to be positioned outside of your box (like a position: absolute) it won't be visible.
但是，这两种解决方案都存在问题。对于第一个，您添加了不必要的和丑陋的标记。而对于第二个，如果您希望将某些东西放置在您的盒子之外（例如 a position: absolute），它将不可见。
A more common, modern solution is to use the ::afterpseudo-element and clear that like so:
更常见的现代解决方案是使用::after伪元素并清除，如下所示：
.box1::after {
content: '';
display: table;
clear: both;
}
回答by Jacob
I'd recommend the following:
我会推荐以下内容：
#box1
{
position: relative; /* or some other positioned value */
}
#box2
{
width: 10px;
height: 10px;
position: absolute;
top: 0;
left: 0;
}
#box3
{
margin-left: 10px;
}
If #box2is of a fixed size, you can simply use a margin for #box3to prevent its overlapping of #box2, and since it's not positioned, #box1will grow as #box3grows.
如果#box2是固定大小，您可以简单地使用边距#box3来防止其重叠#box2，并且由于它没有定位，#box1将随着增长而#box3增长。
