html - 奇怪的行为浮动

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的 adiv默认为width:100%;.

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

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