浮动创建重叠div [英] Float Creates Overlapping Divs
问题描述
我有两个div（一个在另一个），并遇到一个问题，当我把一个里面的左。问题是外部div不会扩展其高度以适合内部div的文本。因为这可能很混乱，我会尝试用一些代码解释它。
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.
HTML：
<body>
<div id="div1">
Inner Div:
<div id="div2">Testing long content.</div>
</div>
</body>
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.
推荐答案
你需要使用clear-fix。在您的浮动div之后并在包含div中插入以下内容。
You need to use the clear-fix. Insert the following after your floated div, and within the containing div.
<div class="clear"></div>
并添加以下样式：
.clear { clear:both; }
示例：
<div class="container">
<div class="floatedDiv">Hello World</div>
<div class="clear"></div>
</div>
这篇关于浮动创建重叠div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
