jQuery UI可排序框始终具有高度：0

Question

我有一个ul设置为jQuery UI可排序小部件：它的高度始终被计算为0，导致它不适合其父div。请参见屏幕截图：

构建可排序的jQuery：

    $(function() {
        $("#sortable").sortable({
            stop: function(event, ui) {
                // Code
            }
        });
        $( "#sortable" ).disableSelection();
    });

ul的风格：

    #sortable { 
        list-style-type: none; 
        margin: 0 auto; 
        padding: 0; 
        width: 800px; 
    }
    #sortable li {
        margin: 3px 3px 3px 0;
        padding: 4px;
        float: left;
        width: 100px;
        height: 90px;
        font-size: 4em;
        background: white;
        text-align: center;
    }

Answer 1

这是因为#sortable内的内容都是浮动的，这意味着父容器#sortable不会扩展以容纳该内容（高度为零，因为它实际上是空的，直到父级被关注到）。浮动内容不会以正常方式影响其周围的其他内容，但添加溢出会强制父容器将浮动子容器识别为包含在其自身内并为其提供容纳高度（因为它需要确定它们是否可见或不是）。

将overflow: hidden或overflow: auto添加到#sortable，使其高度与内容相符。

但是，如果您希望将页面流扩展到可排序对象的维度，则应将micro clearfix之类的clearfix添加到#sortable。这应解决流量问题。

Answer 2

将overflow:auto添加到#sortable。