Question

如果我包含或删除'float：left'行，下面的代码示例几乎相同。唯一的区别是浮动左侧版本将其下方的块向上移动了一点，但不超过换行符。我不明白为什么你要将浮动添加到设置为100％宽度的元素。根据我的理解，这可以防止它下面的一切流动。这不是浮动的目的吗？

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

li
{
    display: inline;    
}

Answer 1

这可行的原因是因为<li>显示设置为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;
}

通过这种方式，您可以确保每个列表项也可以正确使用margin和padding，而不是通常用作文本字符串中的字符的内联元素。

Answer 2

float属性旨在允许对象与文本内联显示，并将其指向一侧。因此浮动左侧很像内联，但浮动的元素向左或向右对齐。没有必要使用浮动：左;标记为您要做的事情，通常更好的方法是使用位置，边距，填充，左，顶部，右侧，底部将ul放置在您想要的位置。这通常会产生更可控的结果。

这是在没有浮动和浮动之间切换时发生的事情的示例。 http://jsfiddle.net/um9LV/

Answer 3

float CSS属性指定一个元素应该从正常流中获取并放置在其容器的左侧或右侧，其中文本和内联元素将环绕它。

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

Answer 4

float:left - 使用float来使块元素彼此相邻滑动

display:block - 将链接显示为块元素可使整个链接区域可单击（而不仅仅是文本），并允许我们指定宽度

float的目的是什么：在创建水平导航栏时留在无序列表中？

4 个答案: