Question

我真的不明白这里发生了什么。

这是我的CSS和HTML

#content {
    -moz-border-radius:10px;
    background:#F0F0F0;
    width: 910px;
    margin: 0 auto;
    clear: both;
}

#content ul {
list-style: none;
padding: 0;
margin: 0;
}

<div id="content">
  <ul>
    <li>Foo</li>
    <li>Bar</li>
    <li>Baz</li>
  </ul>
</div>

我获得了一个灰色框，其中包含垂直对齐的项目。我希望将它们水平对齐，我知道我必须将float: left放在#content ul选择器中。如果我这样做，灰色div框就会消失，并且三个li条目保持垂直。如果我把float：left放到#content ul li选择器，条目现在是水平的，但封闭框仍然消失。

我错过了什么？

Answer 1

float ed元素实际上并不强制容器元素向下扩展以保持它们（它们将向下浮动超过容器的底部）。您需要做的是在列表后添加一个元素clear:both作为其样式的一部分，以强制它在浮动下方，从而迫使容器的边界扩展到浮点下方。（或者，您可以为容器元素设置固定高度。）

Answer 2

在UL和其他CSS一起添加高度。

#content ul
{
    height: 20px;
}

#content ul li
{
    float: left;
}

或者您可以在UL上使用以下没有高度的

#content ul li
{
    display: inline;
}

或者你可以把一个元素放在清除的UL之下。

CSS：

.clear
{
    clear: both;
    height: 1px;
}

HTML：

<ul>
    <li></li>
    <li></li>
</ul>
<div class="clear"></div>

或（为了更好的衡量标准）您可以为包装div添加高度

CSS：

.wrappingDiv
{
    height: 20px;
}

说明：浮动元素超出了内容的正常流程。因此，包裹元件不会“意识到”浮动元件的高度。

float：left删除包括div？

2 个答案: