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 на поля, что делает код более семантическим, потому что они на самом деле являются наборами полей и применяют к ним правило отображения, выравнивание: сверху», как так:

<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> 

вы могли заметить, что вам больше не нужен запасной DIV с„четким: ни“