Css 当创建水平导航栏时，float:留在无序列表上的目的是什么？

如果我包括或删除“float:left”行，下面的代码示例的工作原理几乎相同。唯一的区别是，float left版本将其下方的块向上移动多一点，但不会超过换行。我不明白为什么要将浮动添加到设置为100%宽度的元素中。据我所知，这阻止了它下面的一切绕着它流动。这不是漂浮的目的吗

ul
{
    list-style-type: none;
    float: left;
    width:100%;
    padding:0;
    margin:0;
}

li
{
    display: inline;    
}

---

之所以这样做，是因为您的

显示设置为

inline

。这意味着所有具有此HTML标记的元素都将显示在与所有其他元素相同的行上。换句话说，不会有换行。我建议改为：

ul {
    list-style-type: none;
    width: 100%;
    padding: 0px;
    margin: 0px;
    overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}

li {
    float: left;
}

---

通过这种方式，您可以确保每个列表项也可以正确地使用

边距

和

填充

，而不是通常用作文本字符串中字符的内联元素。

float属性旨在允许对象与指向一侧的文本内联显示。因此，Float left非常类似于inline，但被浮动的元素是向左或向右对齐的。不需要使用浮动：左；标记您正在尝试执行的操作，通常最好使用位置、边距、填充、左、上、右、下将ul放置在您想要的位置。这通常会给出一个更可控的结果

下面是一个在无浮动和左浮动之间切换的例子。 CSS属性指定一个元素应从正常流中提取，并沿其容器的左侧或右侧放置，文本和内联元素将环绕该元素

---

当一个元素浮动时，它将从文档的正常流中移出。它向左或向右移动，直到它接触到其包含框的边缘或另一个浮动元素。

浮动：左-使用浮动使块元素彼此相邻滑动

---

display:block

-将链接显示为块元素，可以单击整个链接区域（不仅仅是文本），还可以指定宽度

，非常感谢。我一直在想浮动在内联上的好处。使用边距和填充的能力对我来说真的很清楚。没问题，很高兴听到它对你有用。如果你喜欢我的答案，那么就把它标记为正确的，这样其他来这篇文章的人就可以看到它是正确的！