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

Question

请看这个例子并向我解释为什么绿色<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到父级.

就个人而言,我尝试使用后者.

这是你的jsFiddle工作.