Question

有人可以告诉我这里我做错了什么。我试着写清楚：两者;也在浮动元素内，但似乎没有任何效果。

我希望绿色边框内的那些小橙色框不是这样的（见图）。

enter image description here

<style type="text/css">
    .wrap {
        border:solid 2px green;
    }
    .wrap div {
        margin: 0 0 0 10px;
        padding: 10px;
        text-align: center;
        width: 67px;
        float:left;
    }
    .wrap div span {
        display:block;
        background-color:orange;
        margin:2px;
    }
    .clear {
        clear:both;
    }
</style>


<div class="wrap">
    <div>
        <span>xx</span>
        <span>xx</span>
        <span>xx</span>
    </div>
    <div>
        <span>yy</span>
        <span>yy</span>
        <span>yy</span>
    </div>
    <div>
        <span>zz</span>
        <span>zz</span>
        <span>zz</span>
    </div>
    <div class="clear"></div>
</div>

Answer 1

添加

display: inline-block;

到您的wrap容器css

小提琴：http://jsfiddle.net/Pv6m2/1/

Answer 2

Updated Fiddle

你正在浮动<div class="clear">。这就是为什么它不起作用。

尝试使用此选择器代替浮动divs，以便不匹配清算div：

.wrap div:not(.clear) {
    margin: 0 0 0 10px;
    padding: 10px;
    text-align: center;
    width: 67px;
    float:left;
}

解决此问题的另一种方法是将float: none添加到清算类：

.clear {
    clear: both;
    float: none !important;
}

Answer 3

在。float:left; div上添加wrap Demo

Answer 4

这是因为.wrap没有任何高度。

添加

overflow:hidden;

到.wrap。它会给它带来高度。

Updated fiddle here.

Answer 5

.wrap {
        border:solid 2px green;
        overflow:hidden;
    }

这应该在你的CSS中。

Answer 6

或者使用

.wrap {
    border: solid 2px green;
    overflow: hidden;
}

并删除<div class="clear"></div>

所有其他答案也完全没问题。喜欢学习花车！

清理浮动不行

6 个答案: