为什么内容在DIV旁边浮动？

Question

我正在尝试使用浮动div来构建表单，而不是使用表格的正常方法。我已经到达提交按钮，并试图将其集中。通常情况下，作为一个块元素的DIV会自动用完一整行并在它不是之后出现换行符？但我的不，我不明白为什么。我试着明确地将它的宽度设置为100％，但它仍然不会使用全宽。为了让我更加迷惑，div的风格明确：两者都是;我认为应该防止任何内容在其旁边浮动。我也尝试把它的下面的文本放在它自己的div中，但没有任何改变。为什么文本浮动在提交div旁边？

<style type="text/css"> 
    #rlpContactForm 
    { 
     width:275px; 
    } 
    #rlpContactForm label 
    { 
     display:block; 
     float:left; 
     width:112px; 
     text-align:right; 
     font-weight:bold; 
    } 
    #rlpContactForm input 
    { 
     float:left; 
     margin:0 0 5px 5px; 
    } 
    #rlpContactForm input[type="text"] 
    { 
     border: 1px solid #999999; 
    } 
    #rlpContactForm input[type="text"] 
    { 
     width: 146px; /*175 available - total width of label (including margins/borders/10pxwiggle room)*/ 
     padding: 1px 0px 1px 0px; /* Otherwise IE adds 1px right and left padding automatically */ 
    } 
    #rlpContactForm input[type="text"].age 
    { 
     width: 44px; /* Sized for 3 boxes to fit 1 line */ 
     margin: 0 0 5px 5px; 
     text-align:center; 
    } 

    #rlpContactForm .submit 
    { 
     float:none; 
     clear:both; 
     width:100%; 
     text-align:center; 
    } 
</style> 

... 

<div id="rlpContactForm"> 
     <label>First Name:</label> 
     <asp:TextBox ID="txtFName" runat="server" /> 
     <label>Last Name:</label> 
     <asp:TextBox ID="txtLName" runat="server" /> 
     <label>E-mail:</label> 
     <asp:TextBox ID="txtEmail" runat="server" /> 
     <label>Phone:</label> 
     <asp:TextBox ID="txtPhone" runat="server" /> 
     <label>Children's Ages:</label> 
     <asp:TextBox ID="txtAge1" runat="server" CssClass="age"/> 
     <asp:TextBox ID="txtAge2" runat="server" CssClass="age"/> 
     <asp:TextBox ID="txtAge3" runat="server" CssClass="age"/> 

     <div class="submit"><asp:Button ID="btnSubmit" runat="server" Text="Submit"/></div> 
     Thank you for your interest. A team member will contact you shortly. 
    </div> 

IE和Firefox显示像

|Submit|Thank you for your interest. A 
     team member will contact you 
shortly. 

Answer 1

浮动文本，以及如果你不希望这样的事情发生：

<div class="float:left">Thank you for your interest. A team member will contact you shortly.</div> 

编辑

我现在明白你的意思，即使上面的答案适合你，这是一个更好的w唉做到这一点：

.submit 
    { 
     float:none; 
     clear:both; 
     width:100%; 
     text-align:center; 
     overflow:hidden; 
    } 

因为.submit格内输入元素留下了一个浮动的.submit DIV失去了它的高度。要防止这种情况，请添加overflow:hidden。

我从来不知道究竟发生了什么，以及正确的术语是什么，所以你不得不去看。我只知道它是如何工作的：P

Answer 2

停止。等待。不，答案确实比所有这些要容易得多。

问题是您的.submit容器清除，是的，但它没有/包含/放入它的按钮。该按钮仍然浮动。

尝试这样：

#rlpContactForm .submit input { 
    float:none; 
}