奇怪的行为漂浮

Question

这是我的代码

#sidebar
{
    width:140px;
    border: solid 3px green;
    height:300px;
    float:left;
}


#content
{
    border: solid 3px blue;
    height:400px;
    float:left;

}
<div id="sidebar">Sidebar</div>

<div id="content">Content</div>

---

由于未指定内容div的宽度，因此预期将仅占用足够的空间来显示div内的文本

现在不使用浮动，而是使用这样的边距：

#content
{
    border: solid 3px blue;
    height:400px;
    margin-left:160px;

}

内容div现在将占用浏览器视口宽度的其余部分，即使未指定宽度。

我假设这样做的原因是内容div继承了用户代理样式表指定的body标签的width属性。如果这是真的，我的问题是当我使用浮动时，为什么不是继承？

Answer 1

width上未指定的div默认为width:100%;。

您需要指定width:auto;才能获得所需的效果，只需要足够宽以包含其内容。

#content
{
    width  : auto;
    border : solid 3px blue;
    height : 400px;
    float  : left;
}