javascript - div 元素高度自动设置为零

Question

我有一个相当简单的布局 - 主 div，它向左浮动。在其中，我嵌套了其他 div，风格都清晰。这是一个简化版本(所有元素都有子 div):

<div id="wrapper" class="floatLeft">
    <div id="mainMenu" class="clearBoth">
        <div id="item1" class="clearBoth">
        </div>
        <div id="item2" class="clearBoth">
        </div>
        <div id="item3" class="clearBoth">
        </div>
     </div>
 </div>

 .clearBoth {
      clear: both;
  }
  .floatLeft {
      float: left;
  }

问题是 item3 的高度无论出于何种原因被计算为 0。其中的所有元素都溢出到包装器 div 中。它看起来很糟糕，因为主菜单 div 有背景等。如果我将“溢出:隐藏”的样式添加到第 3 项，它看起来不错 - 问题是为什么？我不明白为什么会溢出？但最重要的是 - 为什么 item3 的高度计算为 0？

这是 jsfiddle 的链接 http://jsfiddle.net/uPtCd/

Answer 1

只需给出 <div class="clearBoth"></div> <div>s之后在你的元素 3 中提到

<div style="float:left; width:45%; margin-top:5px"> <span class="label">Laser Power</span>

                <input type="checkbox" class="value lasersetting" id="laserEnable" />
                <label for="laserEnable">On</label>
            </div>
            <div style="float:right; width:55%; margin-top:5px">
                <div style="float:left; margin-left:10px; margin-top:10px" id="laserSlider"></div>
                <input type="text" style="float:center" class="value lasersetting" id="laserValue" value="0" valType="number" min="0" max="100"></input>
            </div>

<div class="clearBoth"></div>

这应该可以解决!

也只是一个建议，你不需要给所有父 DIV "class="clearBoth"。你需要做的就是清除 "float" 给出一个带有 clearBoth 类的空 DIV，您在 FLOATING DIV 结束的地方。就像我们对上述 DIV 所做的一样!