ie7下推浮动答案

【问题标题】：ie7 pushing down floatsie7下推浮动
【发布时间】：2020-07-09 18:18:19
【问题描述】：

我遇到了 ie7 问题。在 Firefox 和 IE8 中似乎一切正常。

在 ie7 中，第一个元素可以正常工作，但所有其他元素都被下推，就像它们已明确应用一样。

图片最能说明这一点。

这是代码。

.newLabellg 
{
    float:left; 
    width:66px; 
    margin:3px 0 0 0;
    font-weight:bold;
    color:#000;
}


<div style="float:left; width:320px;">

    <div style="margin-bottom:10px; float:left;">
        <div class="newLabellg">Cusotmer#:</div>
        <div style="float:left;">
        <asp:TextBox ID="CustomerNumber" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg">Cusotmer:</div>
        <div style="float:left;">
        <asp:TextBox ID="CustomerName" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg" style="float:left;">Address:</div>
        <div style="float:left;">
        <asp:TextBox ID="Address" runat="server" Width="220px"></asp:TextBox>
        </div>
    </div>

    <div style="margin-bottom:10px; float:left; clear:both;">
        <div class="newLabellg">Mailing Address:</div>
        <asp:TextBox ID="Address2" runat="server" Width="220px"></asp:TextBox>
        <div style="float:left; margin:3px 0 0 0">
        <asp:DropDownList ID="City" runat="server" Width="109px">
        </asp:DropDownList>
       <asp:DropDownList ID="Province" runat="server" Width="109px">
        </asp:DropDownList></div>

    </div>
</div>

知道 ie7 为何/在做什么，我该如何解决？

【问题讨论】：

标签： html css css-float internet-explorer-7

【解决方案1】：

只需从以下每个实例中删除 clear: both：

<div style="margin-bottom:10px; float:left; clear:both;">

让它在我测试它的浏览器中看起来正确：IE7/8 + Firefox。

如果删除 clear: both 导致其他问题，请告诉我们，我们可以找到解决方法。

【讨论】：

我会试试这个并回复你。但我很清楚。 clear:both 应该只适用于那个元素而不是它的子元素？这实际上是一个 ie7 错误，对吧？
@Adam：@Julian 的答案中的链接确认这是一个 IE7 的某种错误 - “IE7-/Win：在同一元素上浮动 + 清除的问题” .
谢谢成功了。奇怪我以前从来没有遇到过这个问题。

【解决方案2】：

我想说唯一合乎逻辑的结论是clear:both 引起了问题——因为它是第一项没有的唯一样式。

float + clear 在同一元素上会导致 IE7 出现异常。

http://www.brunildo.org/test/IEWfc3.html

【讨论】：