Question

我想这可能已被问过很多次了，但是我在整个论坛上搜索过，并没有找到这个案例的答案。

我有一些div“容器”和一些div“item”所有浮动的元素，我希望每个“容器”低于前一个。

我知道如果不在容器上使用浮子，我就可以实现这一点。但我认为使用:after和clear:就足够了。

为什么这不起作用？

我的代码：

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="./style2.css">
</head>
<body>
    <header></header>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

</body>
</html>

我的CSS：

* {
    margin: 0;
    padding: 0;
}

header {

    width: 100%;
    min-height: 25px;
    background-color: #444;
    position: fixed;
    overflow: auto;
}

.container {
    float: left;
    padding: 10px;
    margin: 10px;
}

.container:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.item {
    min-width: 50px;
    min-height: 50px;
    float: left;
    background-color: lightblue;
    border: 1px solid red;
    margin: 5px;
}

谢谢

Answer 1

只需将clear:left添加到您的.container规则

即可

.container {
    clear:left;
    float: left;
    padding: 10px;
    margin: 10px;
}

<强> jsFiddle example

Answer 2

您可以通过将.clearfix类添加到 .container div来使用clearfix方法：

.clearfix:before,

.clearfix:after{
    content: " ";
    display: table;
}

.clearfix:after{
    clear: both;
}

<div class="container clearfix">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

使用这种方法，您不需要浮动：左您的 .container ，还有， Clearfix它会帮助你每次 div 通过根据孩子的高度变量使孩子们浮动孩子。

另一种方法是将 clear：left 添加到 .container ，但我不推荐它，因为它是一种特定的方法解决方案。

CSS Float元素

2 个答案: