html - 奇怪的行为 float

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 内的文本

现在我不再使用 float ，而是像这样使用边距:

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

}

内容 div 现在将占据浏览器视口(viewport)的其余宽度，即使未指定宽度也是如此。

我假设这是因为内容 div 继承了用户代理样式表分配的 body 标签的宽度属性。如果这是真的，我的问题是为什么当我使用 float 时没有发生继承？

Answer 1

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

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

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