为什么我的div被推出容器div？

Question

这是我的JSFiddle。 （可能需要在输出上向右滚动才能看到我丢失的元素。）

似乎有一个问题导致我的logout div被推出其容器div之前。我之前遇到过这种问题，我不确定是什么原因造成的。我尝试删除每个元素header title和<ul>，但似乎它一直被推出它所包含的内容。

这里发生了什么？我错过了什么？

Answer 1

logout div转义其容器div，因为它是向右浮动的，而float从正常文档流中取出一个元素。您可以通过添加overflow:auto

强制父级包含它

http://jsfiddle.net/7S8cu/2/

这种布局通常通常使用网格来处理，例如Bootstrap或Foundation网格，它们会为您处理基本的布局代码。

Answer 2

将此CSS添加到object ul

ul li是块元素，默认情况下它的宽度为100％。所以你需要设置width和float到elememt

.objects ul{ 
    padding-top: 10px;
    margin-left: 100px;
    diplay:inline-block;
    float:left;

}

以下是demo