css - 为什么当我设置宽度时，一个元素会占据整个空间？

Question

我想知道为什么我设置宽度时一个元素会占满整个宽度？

例如，

<div style="width:50px;">


<fieldset>
<legend>test A</legend>

<table>
<tr>
<td><asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </td><td>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </td>
</tr>

</table>

</fieldset>
</div>

<div style=" width:300px; float:left;">
<fieldset><legend>test2</legend>
<table>
<tr>
<td><asp:Label ID="Label2" runat="server" Text="Label"></asp:Label> </td><td>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </td>
</tr>
</table>
</fieldset>
</div>

当我检查 chrome 开发者工具时，我发现第二个表格不能紧挨着第一个表格或第一个 div float ，因为第一个 div 占据了整个位置，尽管我限制了它的宽度。我知道如果在第一次潜水时使用“float:left”，两个 div 都会一个接一个地 float 。但我想知道为什么使用宽度不足以达到目的？

谁能给我解释一下吗？

Answer 1

默认情况下，<div>是 block 级元素，这意味着在 CSS 盒模型中，除非它们是 float 的，否则它们会另起一行。

这就是符合标准的浏览器的工作方式。