清除浮動不起作用

Question

有人可以告訴我我在做什么錯。 我已經嘗試寫了clear：both; 還在浮動元素內，但似乎沒有任何作用。

我想要綠色邊框內的那些小的橙色框，而不是這樣（見圖）。

在這里擺弄代碼：

<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

更新小提琴

您正在浮動<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; 在。 wrap div 演示

Answer 4

這是因為.wrap沒有任何高度。

加

overflow:hidden;

.wrap 。 它會給它高度。

在這里更新了小提琴。

Answer 5

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

這應該在您的CSS中。

Answer 6

替代使用

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

並刪除<div class="clear"></div>

所有其他答案也都很好。 喜歡學習花車！