Html 父 <div> 没有用 float 属性包装子元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5495476/
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
Parent <div> not wrapping child element with float attribute
提问by Web_Designer
Please look at this exampleand explain to me why the green <div>does not wrap itself around the orange <div>.
请看这个例子并向我解释为什么绿色<div>不包裹在橙色周围<div>。
<div id='green'>
<div id="orange"></div>
</div>
#green{
border: 20px solid #3D3;
}
#orange{
width :100px;
height: 100px;
border: 10px solid orange;
float: left;
}
回答by Jordan Lewis
Try adding float:leftand display:blockto the outer div
尝试将float:left和添加display:block到外部 div
see updated example - http://jsfiddle.net/jordanlewis/gDtSZ/1/
查看更新的示例 - http://jsfiddle.net/jordanlewis/gDtSZ/1/
回答by alex
Elements do not expand to contain floated children by default.
默认情况下，元素不会扩展以包含浮动子项。
There are a number of workarounds, such as floating the parent, using a clearfixor adding overflow: hiddento the parent.
有许多解决方法，例如浮动父级、使用清除修复或添加overflow: hidden到父级。
Personally, I try and use the latter.
就个人而言，我尝试使用后者。
回答by Suhas
and if you don't want to float your outer div to left you can set it to
如果您不想将外部 div 浮动到左侧，则可以将其设置为
display:table
display:table
this will make the outer div wrap around the inner one.
这将使外部 div 环绕内部 div。
回答by Cau Guanabara
<div id='green'>
<div id="orange"></div>
<div style="clear:both"></div>
</div>
回答by Cyprian Nziim
you could just add display:inline-block to the orange box.
您可以将 display:inline-block 添加到橙色框中。
回答by Mark
The green box is not a floated element.
绿色框不是浮动元素。
You need to either clear your float after the nested div or float both.
您需要在嵌套 div 之后清除浮动或浮动两者。
