包含浮動左項的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不會拉伸以包圍複選框。有沒有更好的辦法來強制它擴展？

Answer 1

是的，這就是CSS的工作原理。有解決方法（my preferred one,another approach）允許父級指定它將展開以包含其浮點數。

Answer 2

我假設你想要2列複選框並排。就我個人而言，當你真的應該使用'display：inline-block'時，我會將浮動視爲黑客行爲。使用內聯塊時有幾件事要注意。在Internet Explorer 7及更低版本中，它只適用於以內聯方式開頭的元素，並且您可能會發現內容最終位於元素的底部。由於元素現在呈現爲塊狀，因此您可能還需要設置寬度。

您可以通過執行以下操作來修復它們：將p標籤更改爲fieldsets，這使得代碼更具語義性，因爲它們實際上是一組字段，並將顯示規則應用於它們以及「對齊：頂部」，像這樣：

<div id="DateAndTime" style="clear:left; width:100%" class="Frame"> 
<h2>Date & Time Criteria</h2> 
<h3>Permitted Days of the Week</h3> 
<fieldset class="DataForm" style="display:inline-block; vertical-align:top"> 

<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 /> 
</fieldset> 
<fieldset class="DataForm" style="display:inline-block; vertical-align:top"> 
<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 /> 
</fieldset> 
</div> 

你可能已經注意到，您不再需要一個備用的分度‘明確：無’