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

只需在商品3

中提到的<div class="clearBoth"></div>之后提供<div>s即可

<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“给一个清空BIV的空DIV你浮动DIVs结束。就像我们为上面的DIV做的那样！

Answer 2

我不是CSS专家，所以我会推荐你this SO question。基本思想是HTML / CSS中存在“流”这一概念，它决定了HTML / CSS布局引擎如何组织和布局内容/标记。你在这里遇到的问题是，基于你的小提琴，你的#item3只包含浮动的子元素。浮动元素从“正常流动”中移除。当浏览器中的布局引擎确定#item3的大小和布局方式时，它会查找元素内部的“正常流”内容。找不到，它将高度计算为0.宽度遵循block元素的规则，因为它是div而没有修改的display CSS规则。

如果您想保持#item3的子元素浮动，您可以在this (duplicate) SO question中探索一些替代解决方案。或者，删除子元素上的float规则。

请注意，这个“流程”的概念在HTML5中有所改变，成为一个更为通用的概念Content Models。

Div元素高度自动设置为零

2 个答案: