具有div结构的块开始输出不正确

Question

我有下一个问题：

我有这个html结构：

<aside> 
<!-- ...... -->
    <div class='block'>
        <div class='header'><h1>Новости</h1></div>
        <div class='content'>
            <div>
                <label>bob</label>
                <input />
            </div>
            <div>
                <label>bob</label>
                <input />
            </div>
            <div>
                <label>&nbsp;</label>
                <input />
            </div>
        </div>
    </div>
<!-- ...... -->
</aside>

这个css结构：

aside label {
    color: #ffcc33;
    width: 100%;
    display: block;
    font-size: 80%;
}

aside label.login {
    text-align: right;
}

aside form input {
    float: right;
}

aside > div.block > div.content div {
    float: right;
    display: block;
    width: 100%;
}

aside > div.block > div.content div+div {
    margin-top: 5px;
}

为什么父块很小，就像没有任何数据一样？有一些，但它仍然显示为没有。

Answer 1

您需要一个clearfix。试试Nicolas Gallagher的micro clearfix：

.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}

Answer 2

将overflow:auto添加到您的<div class='content'>元素中。由于漂浮的孩子，它崩溃了。