0

我有一个相当直接的布局 - 主 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/的链接

4

2 回答 2

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”所需要做的就是提供一个空的 DIV，其类为 clearBoth，您的 FLOATING DIV 结束。就像我们正在为上述 DIV 做事！

于 2013-09-11T18:44:47.010 回答
1

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

如果您想保留浮动的子元素，您可以在这个（重复的）SO question#item3中探索一些替代解决方案。或者，删除子元素上的规则。float

请注意，“流”的概念在 HTML5 中有所改变，成为更通用的概念，称为内容模型。

于 2013-09-11T18:45:08.610 回答