html - "float: left"使 元素忽略它包裹在其中的 标签，除非 re 有一定的像素高度

Question

JSFIDDLE

这可能是一个微不足道的问题，但我似乎找不到答案。如果您在 JS Fiddle 中看到，当包裹

的
没有指定特定高度时，它通常会忽略 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;
    }

最佳答案

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

可能的解决方案:

1. 给父容器一个固定的高度来容纳它的子容器。
2. 使用 display:inline-block 将元素放置在彼此相邻的位置，而不是 float 。
3. 使用具有 clear 规则的元素来打破所有 float 元素的下方。
4. “ float 所有内容”方法 - float 元素将调整为它的 float 子元素。这通常是一个糟糕的解决方案，因为顾名思义，您最终将一切都 float 。

关于html - "float: left"使 <li> 元素忽略它包裹在其中的 <div> 标签，除非 re 有一定的像素高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17212367/

上一篇：html - Firefox 中标签和复选框之间的额外空间

下一篇：css - Eclipse Web 应用程序元素。引入的 CSS 属性不起作用

Answer 1

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

可能的解决方案:

1. 给父容器一个固定的高度来容纳它的子容器。
2. 使用 display:inline-block 将元素放置在彼此相邻的位置，而不是 float 。
3. 使用具有 clear 规则的元素来打破所有 float 元素的下方。
4. “ float 所有内容”方法 - float 元素将调整为它的 float 子元素。这通常是一个糟糕的解决方案，因为顾名思义，您最终将一切都 float 。