Jquery 当父容器的浮动子容器增长时，如何允许父容器响应并增加其高度？

这是小提琴

正如你所看到的，红色应该在所有孩子的后面，因为他们是浮动的，他们不会让后面的div看到他们，然后扩展

我有一个“添加项目”按钮，显示我不可能给出一个固定的with，因为我无法知道需要添加多少元素。除了在形成新行时使用Javascript手动将像素添加到选定的类之外，我没有什么想法

代码：

<div class="container">
    <button id="addItemBtn" type="button">Add Item</button>

    <div id="sortable-container">
        <ul id="sortable">
            <li class="ui-state-default">1</li>
            <li class="ui-state-default">2</li>
            <li class="ui-state-default">3</li>
            <li class="ui-state-default">4</li>
            <li class="ui-state-default">5</li>
            <li class="ui-state-default">6</li>
            <li class="ui-state-default">7</li>
            <li class="ui-state-default">8</li>
            <li class="ui-state-default">9</li>
            <li class="ui-state-default">10</li>
            <li class="ui-state-default">11</li>
            <li class="ui-state-default">12</li>
        </ul>
    </div>
</div>

.container{
    background-color:red;
} 

#sortable {
    list-style-type: none;
    margin: 0;
    padding: 0; 
    width: 450px; 
}

#sortable li {
    margin: 3px 3px 3px 0;
    padding: 1px; float: left;
    width: 100px; height: 90px;
    font-size: 4em;
    text-align: center;
} 


    $(function() {   

        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();          

        $( "#addItemBtn" ).click( function(){

        var item = $( "#sortable" ).find("li").first().clone(true);         
        item.appendTo($( "#sortable" ))

    });

});

添加项

1
2
3
4
5
6
7
8
9
10
11
12

.集装箱{
背景色：红色；
} 
#可恶的{
列表样式类型：无；
保证金：0；
填充：0；
宽度：450px；
}
#可悲的李{
保证金：3px 3px 3px 0；
填充：1px；浮动：左侧；
宽度：100px；高度：90px；
字号：4em；
文本对齐：居中；
} 
$（函数（）{
$（“#可排序”）.sortable（）；
$（“#可排序”）.disableSelection（）；
$（“#addItemBtn”）。单击（函数（）{
var item=$（“#可排序”）.find（“li”）.first（）.clone（true）；
项目.附件（$（“#可排序”））
});
});

添加

溢出：隐藏到您的
.container
css。为了澄清这一点，当子容器浮动时，容器将崩溃，使用
overflow:hidden（不设置高度值）将允许容器自清除浮动元素

添加
溢出：隐藏到您的
.container
css。为了澄清这一点，当子容器浮动时，容器将崩溃，使用
overflow:hidden（不设置高度值）将允许容器自清除浮动元素

经典的浮动行为

您可以将其添加到容器（compass pie clearfix）

经典的浮动行为

您可以将其添加到容器（compass pie clearfix）

这起作用了。你能澄清什么是“自我清除”吗？当我想到clear时，我想到remove，或empty.CSS有一个
clear
规则来强制元素出现在浮动元素下面。自清除是指强制容器元素包含任何浮动的子元素，这不是默认行为。谷歌“css清除浮动”，你会发现大量的阅读材料：）这是有效的。你能澄清什么是“自我清除”吗？当我想到clear时，我想到remove，或empty.CSS有一个
clear
规则来强制元素出现在浮动元素下面。自清除是指强制容器元素包含任何浮动的子元素，这不是默认行为。谷歌“css clear float”，你会发现很多阅读材料：）我认为这是一个更好的答案，因为。对我来说效果很好。Skrivener的也一样，但我不知道为什么它会导致父容器移动到窗口的右侧，就像它是浮动的一样。我认为这是一个更好的答案，因为。对我来说效果很好。Skrivener也这样做了，但我不知道为什么它会导致父容器移动到窗口的右侧，就像它被浮动一样。
.container:after
{
    content: "";
    display: table;
    clear: both;
}