Html 如何将浮动div保持在父div的框架内？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9017120/
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 keep floating div inside frame of parent div?
提问by Cedric Reichenbach
I have a div containing several other divs with setting float:left. Now I want a frame around all of them, so i put a border on the parent div, but the floating ones "flow" out of the frame...
我有一个包含其他几个 div 的 div，其中设置了 float:left。现在我想要一个围绕所有这些的框架，所以我在父 div 上放置了一个边框，但是浮动的那些“流出”了框架......
CSS:
CSS：
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
}
.column {
float:left;
padding-left:10pt;
}
Html:
网址：
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
</div>
What can I do (in CSS) to keep them inside the parent frame?
我可以做什么（在 CSS 中）将它们保留在父框架内？
回答by Zoltan Toth
add overflow: hiddento your parent <div>- http://jsfiddle.net/5AVA8/
添加overflow: hidden到您的父母<div>- http://jsfiddle.net/5AVA8/
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
overflow: hidden;
}
回答by SpaceBeers
You're not clearing the floats. If you change your code to this it will solve your problem.
你没有清除浮动。如果您将代码更改为此，它将解决您的问题。
.rendering {
padding-left:10pt;
border-width: 1px;
border-style: solid;
}
.column {
float:left;
padding-left:10pt;
}
.clear {
clear: both;
}
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
<div class="clear"></div>
</div>
See the example I've set up here - http://jsfiddle.net/spacebeers/RQNDr/
请参阅我在此处设置的示例 - http://jsfiddle.net/spacebeers/RQNDr/
For more information on the clear property - http://css.maxdesign.com.au/floatutorial/
有关 clear 属性的更多信息 - http://css.maxdesign.com.au/floatutorial/
回答by IsisCode
You must 'clear the float', there are various methods of 'float clearing'. Some solutions involve CSS only, my preferred solution (disliked by some people because it adds extra markup) is to add a 'clearing div', it works as follows:
您必须“清除浮动”，“清除浮动”有多种方法。一些解决方案只涉及 CSS，我的首选解决方案（有些人不喜欢，因为它添加了额外的标记）是添加一个“清除 div”，它的工作原理如下：
<div class="rendering">
<div class="column">
<img class="ImagePlugin" src="some-image">
</div>
<div class="column">
<span class="phone">999</span>
<span class="name">Assange</span>
</div>
<div style="clear:both"></div>
</div>
See the second from last line.
请参阅最后一行的第二个。
