为什么我的div高度为零

我有我的CSS以下。 所有边距/填充/边框全局重置为0。

#wrapper{width: 75%; min-width: 800px;} .content{text-align: justify; float: right; width: 90%;} .lbar{text-align: justify; float: left; width: 10%;} 

现在，当我写我的HTML为

 <div id="wrapper"> <div class="content"> some text here </div> <div class="lbar"> some text here </div> </div> 

页面呈现正确。 但是，当我检查元素时， div#wrapper显示为0px高。 我会期望它扩大，直到div.content和div.lbar结束…为什么会发生这种情况？

再次，页面渲染罚款。 这种行为只是让我困惑。

Answer 1

浮动内容不影响其容器的高度。 元素不包含没有浮动的内容（因此没有任何东西阻止容器的高度为0，就像它是空的一样）。

设置overflow: hidden在容器上将避免通过build立一个新的块格式上下文 。 请参阅为其他技巧包含浮动的方法，并且包含浮动以解释为什么以这种方式deviseCSS。

Answer 2

一般来说， float不属于父母的布局。

为了防止这种情况，请向父级添加overflow: hidden 。

Answer 3

我不确定这是一个正确的方法，但我通过添加“display：inline-block;”来解决这个问题。 包装div。

 #wrapper{ display: inline-block; /*border: 1px black solid;*/ width: 75%; min-width: 800px; } .content{ text-align: justify; float: right; width: 90%; } .lbar{ text-align: justify; float: left; width: 10%; }