html - 包含 float 左侧项目的 Div 无法正确扩展

Question

<div id="DateAndTime" style="clear:left; width:100%" class="Frame">
<h2>Date & Time Criteria</h2>
<h3>Permitted Days of the Week</h3>
<p class="DataForm" style="float:left">

<asp:CheckBox id="chkMonday" runat="server" Text="Monday"/><br />
<asp:CheckBox id="chkTuesday" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="chkWednesday" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="chkThursday" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="chkFriday" runat="server" Text="Friday"/><br />
<asp:CheckBox id="chkSaturday" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="chkSunday" runat="server" Text="Sunday"/><br />
</p>
<p class="DataForm" style="float:left">
<asp:CheckBox id="CheckBox1" runat="server" Text="Monday"/><br />
<asp:CheckBox id="CheckBox2" runat="server" Text="Tuesday"/><br />
<asp:CheckBox id="CheckBox3" runat="server" Text="Wednesday"/><br />
<asp:CheckBox id="CheckBox4" runat="server" Text="Thursday"/><br />
<asp:CheckBox id="CheckBox5" runat="server" Text="Friday"/><br />
<asp:CheckBox id="CheckBox6" runat="server" Text="Saturday"/><br />
<asp:CheckBox id="CheckBox7" runat="server" Text="Sunday"/><br />
</p>

<p style="clear:left">&nbsp</p>
</div>

如果我删除最后一个 <p style="clear:left">行，div 不会拉伸(stretch)以包含复选框。有没有比这更好的方法来强制它扩展？

Answer 1

是的，这就是 CSS 的工作原理。有一些变通方法(my preferred one、another approach)允许父级指定它将展开以包含其 float 。