Html Float 创建重叠的 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1023159/
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
Float Creates Overlapping Divs
提问by PF1
I have two divs (one inside of the other) and am running into a bit of a problem when I float the one inside to "left". The problem is that the outer div doesn't expand its height to fit the text inside of the inner div. Since this is probably pretty confusing, I'll try to explain it with some code.
我有两个 div（一个在另一个里面），当我将其中一个浮动到“左”时遇到了一些问题。问题是外部 div 不会扩展其高度以适应内部 div 内的文本。由于这可能很令人困惑，我将尝试用一些代码来解释它。
HTML:
HTML：
<body>
<div id="div1">
Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>
CSS:
CSS：
#div2 {
float: left;
width: 10px;
}
I rather hope that when tested this actually shows my problem as I have not had a chance to test this. My real code has more properties which I will pose these if needed.
我宁愿希望在测试时这实际上显示了我的问题，因为我没有机会测试它。我的真实代码有更多属性，如果需要，我会提出这些属性。
回答by Sampson
You need to use the clear-fix. Insert the following after your floated div, and within the containing div.
您需要使用清除修复。在浮动 div 之后和包含的 div 中插入以下内容。
<div class="clear"></div>
And add the following style:
并添加以下样式：
.clear { clear:both; }
Example:
例子：
<div class="container">
<div class="floatedDiv">Hello World</div>
<div class="clear"></div>
</div>
回答by Emily
If you don't want to add additional markup to your html or add a width to your outer div, you can use:
如果您不想向 html 添加其他标记或向外部 div 添加宽度，则可以使用：
#div1 {
overflow:hidden; /* clears float for most browsers */
zoom:1; /* clears float for IE6 */
}
回答by Michiel
Maybe handy to note that there is also the well know clearfix code from positioniseverythingthat is written specifically for this problem and is probably most robust and easiest to apply in any situation. The CSS looks as follows:
也许很容易注意到，还有来自positioniseverything 的众所周知的 clearfix 代码是专门为这个问题编写的，并且可能是最健壮和最容易在任何情况下应用的。CSS 如下所示：
<style>
div.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
div.clearfix { display: inline-block; margin: 0 0 8px 0; }
/* Hides from IE-mac \*/
* html div.clearfix { height: 1%; }
div.clearfix { display: block; }
/* End hide from IE-mac */
</style>
In order to use it in your situation you would do the following:
为了在您的情况下使用它，您将执行以下操作：
<body>
<div id="div1" class="clearfix" >Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>
回答by Itay Moav -Malimovka
(The third time today :-) ) give the outer div overflow: hidden;
and width.
（今天第三次：-））给外层div溢出：隐藏；
和宽度。
回答by Ryan McGrath
While the solutions above should work, I figure it's worth pointing out that there's one magical trick I haven't seen considered yet (in this thread).
虽然上面的解决方案应该有效，但我认为值得指出的是，我还没有看到一个神奇的技巧（在这个线程中）。
Just float #div1 left. When you float the parent element, it'll automagically clear the child element - fairly useful, really. You could build an entire layout of floated stacks, and then have one final clear at the end, and it'd be fairly reliable.
只需向左浮动#div1。当您浮动父元素时，它会自动清除子元素 - 非常有用，真的。您可以构建整个浮动堆栈布局，然后在最后进行最后一次清除，这将是相当可靠的。
