0

JSFIDDLE

这可能是一个微不足道的问题，但我似乎无法找到答案。在您可以在 JS Fiddle 中看到的情况下，当包裹 < ul > 的 < div > 没有指定特定高度时，它通常会忽略 div 并将底部 < div > 移动到所有内容后面。

谁能解释为什么？

这是代码：

<div style="width: 750px;  margin-left: auto; margin-right: auto; background-color: silver; ">
<div class="divWidgetList">
    <ul class="WidgetList">
        <li><a href="#"><sup>One</sup></a>
        </li>
        <li><a href="#"><sup>Two</sup></a>
        </li>
        <li><a href="#"><sup>Three</sup></a>
        </li>
    </ul>
    <ul class="WidgetList">
        <li><a href="#"><sup>Four</sup></a>
        </li>
        <li><a href="#"><sup>Five</sup></a>
        </li>
        <li><a href="#"><sup>Six</sup></a>
        </li>
    </ul>
    <ul class="WidgetList">
        <li><a href="#"><sup>Seven</sup></a>
        </li>
        <li><a href="#"><sup>Eight</sup></a>
        </li>
        <li><a href="#"><sup>Nine</sup></a>
        </li>
    </ul>
  </div>
</div>
<div style="background-color: yellow">-----Something-----</div>

和 CSS

        .divWidgetList {
        width: 740px;
        height: auto;
        clear: left;
        float: left;
    }
    .WidgetList,.WidgetList li{
        color: #373737;
        min-width: 240px;
        display: block;
        float:left;
        font-family:'segoe ui', 'century gothic', arial, sans-serif;
        font-size: 22px;
        font-style: normal;
        font-variant: normal;
        font-weight: lighter;
        height: auto;
        width: 33.33%;
        line-height: 40px;
        list-style-image: none;
        list-style-position: outside;
        list-style-type: none;
        margin: 0px 0px 5px 0px;
        padding: 0px 0px 0px 0px;
        cursor: pointer;
    }
    .WidgetList li {
        padding-left:35px;
    }
    .WidgetList li a:link
    {
        color: #373737;
        text-decoration: none;
    }
    .WidgetList li a:visited
    {
        text-decoration: none;
        color: #373737;
    }
    .WidgetList li a:hover
    {
        color: #f07c01;
    }
4

1 回答 1

1

当您应用float到一个元素时，它不再是常规流布局的一部分。因此，默认情况下，父级的大小适合其子级，当其所有子级都浮动时，它根本没有任何高度。

可能的解决方案：

  1. 给父容器一个固定的高度来容纳它的子容器。
  2. 用于display:inline-block将元素彼此相邻而不是浮动定位。
  3. 使用带有clear规则的元素打破到所有浮动元素的下方。
  4. 'float Everything' 方法 - 浮动元素将调整其浮动子元素的大小。这通常是一个糟糕的解决方案，因为顾名思义，您最终会浮动所有内容。
于 2013-06-20T11:35:03.913 回答