为什么容器div高度没有更新？

Question

我正在将元素添加到最初高度为"auto"的容器div中.我希望它的高度会随着子元素的追加而更新.但实际上并非如此.有人能帮助我吗？我只想根据孩子的身高更新容器div高度.

我使用chrome debuging工具,容器div的高度小于儿童div的高度.儿童div是浮动的:左.

Answer 1

如果你要将浮动的孩子添加到div,你需要overflow:auto;在父母身上.

您还可以使用另一个元素来清除浮点数clear:both.

这是因为浮动元素从文档流中取出.

这是一个示例,向您展示了一些可以使用的技术:http://jsfiddle.net/Tn5c3/

CSS

#a, #b {
    padding: 10px;
    margin:10xp
}

#a {
    background: #aa0000;
}
#b {
    background: #00aa00;
    overflow: auto;
}
p {
    background: #0000aa;
    padding: 5px;
}

.clear {
    clear:both;
    height: 50px;
}

JS

$('#bb').click(function() {
    addChild($('#b')); 
});

$('#ba').click(function() {
    addChild($('#a')); 
});


function addChild(parent) {
    var child = $('<p>floated para</p>').css({
        'float': 'left'
    });
    parent.append(child);
}

HTML

<button id='ba'>Add to A</button>
<button id='bb'>Add to B</button>


<div id='a'></div>
<div class='clear'></div>
<div id='b'></div>