Div contenant des éléments flottants gauche ne se développe pas correctement

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> 

Si je supprime la dernière ligne <p style="clear:left">, le div ne s'étend pas pour encadrer les cases à cocher. Y a-t-il une meilleure façon de l'augmenter?

Answer 1

Oui, c'est comme ça que fonctionne CSS. Il existe des solutions de contournement (my preferred one, another approach) pour autoriser un parent à spécifier qu'il va développer pour contenir ses flottants.

Answer 2

Je suppose que vous voulez cocher deux colonnes côte à côte. Personnellement, je vois les flotteurs comme un hack quand vous devriez vraiment utiliser 'display: inline-block'. Il y a un certain nombre de choses à noter lorsque vous utilisez un bloc inline. Dans Internet Explorer 7 et versions ultérieures, il ne fonctionne que sur les éléments en ligne, et vous pouvez constater que le contenu se retrouve au bas de l'élément. Étant donné que les éléments se comportent désormais comme un bloc, vous devrez peut-être définir une largeur. Vous pouvez les corriger en changeant les balises p en fieldsets, ce qui rend le code plus sémantique car il s'agit en fait d'ensembles de champs, et leur applique la règle d'affichage avec un align: top » comme ceci:

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

vous avez sans doute remarqué que vous ne avez besoin d'une div de rechange est clair: aucun '