浮动单元下单元的位移

Question

有人能解释为什么浮动元素下面的元素会被移动，就好像它有一个宽度的浮动元素一样吗？

HTML和CSS：

​

        div.filter { border: 1px solid #aaaaaa; padding: 0 10px 10px 10px; width: 300px;}
        div.filterTitle { float:left; padding: 5px; margin:-12px 0 0 10px; background:#fff; }
        div.filter label { display:inline-block; width: 120px; font-weight: bold; margin-top: 15px;}
        div.filter input[type="text"] { width: 146px; }

<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
    <div>
        <label for="dateFrom" class="optional">Date</label>
        <input type="text" name="dateFrom" id="dateFrom" value="">
   </div>
</form>
</div>

​

小提琴：jsFiddle

Answer 1

现在还不清楚你在问什么，但基于评论，我认为这只是一个清理浮点的例子。

​

/* filters menu */
 div.filter {
    border: 1px solid #aaaaaa;
    padding: 0 10px 10px 10px;
    width: 300px;
}
div.filterTitle {
    float:left;
    padding: 5px;
    margin:-12px 0 0 10px;
    background:#fff;
}
form {
    clear: both;
}
div.filter label {
    display:inline-block;
    width: 120px;
    font-weight: bold;
    margin-top: 15px;
}
div.filter input[type="text"] {
    width: 146px;
}

<div class="filter">
    <div class="filterTitle">Filters</div>
    <form id="filterForm" method="post" action="">
        <div>
            <label for="dateFrom" class="optional">Date</label>
            <input type="text" name="dateFrom" id="dateFrom" value=""/>
        </div>
    </form>
</div>

​

您还可能希望查看fieldset和legend元素，这些元素似乎更符合您想要的外观。

Fieldset @ MDN

快速JSfiddle演示