Question

请查看this example并向我解释为什么绿色<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;
}

Answer 1

尝试将float:left和display:block添加到外部div

请参阅更新示例 - http://jsfiddle.net/jordanlewis/gDtSZ/1/

Answer 2

默认情况下，元素不会展开以包含浮动的子项。

有许多解决方法，例如使用 clearfix 浮动父级，或将overflow: hidden添加到父级。

就个人而言，我尝试使用后者。

Here is your jsFiddle working

Answer 3

如果您不想将外部div向左浮动，可以将其设置为

display:table

这将使外部div围绕内部div。

Answer 4

<div id='green'>
  <div id="orange"></div>
  <div style="clear:both"></div>
</div>

Answer 5

绿框不是浮动元素。

您需要在嵌套div之后清除浮动或浮动两者。

Answer 6

你可以将display：inline-block添加到橙色框中。

Parent <div>没有用float属性</div>包装子元素

6 个答案: