我的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…为什么会出现这种情况?
div#wrapper
0px
div.content
div.lbar
同样,页面呈现良好。这种行为使我感到困惑。
浮动内容不会影响其容器的高度。元素不包含不浮动的内容(因此,没有什么可以阻止容器的高度为0,就好像它是空的一样)。
overflow:hidden在容器上进行设置将通过建立新的块格式化上下文来避免这种情况。见包含花车方法的其他方法和含彩车有关为何CSS设计这样的解释。
overflow:hidden