Question

有人可以解释为什么浮动元素下方的元素会移位，就好像它有一个浮动元素宽度的填充？

HTML：

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

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

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

Quick JSfiddle Demo

浮动元素下元素的位移

1 个答案: