css - clear both with float right 不会延伸到最后

Question

我有以下示例，我正在尝试创建选项卡，但由于某种原因，即使使用clear: both;. 无论我有float: right;还是，它的行为都是一样的float: left;。有人可以帮我吗？

Answer 1

这是因为ul.

在大多数浏览器中， aul有一个padding-leftof40px来为项目符号分配间距。

jsFiddle 示例- 删除填充

ul {
    background: #006daa;
    float: right;
    padding: 0px;
}

此外， remove clear:both，因为这在这种情况下没有任何影响。

结果：

……到……

Answer 2

只需使用

overflow:auto;

在容器上：http: //jsbin.com/UfIYOWaD/1/edit

发生这种情况是因为非浮动元素无法告诉浮动子元素的大小，除非被迫这样做。

Answer 3

如果您希望蓝色背景跨越整个屏幕，则需要设置(容器)的widthto 。100%ulli

ul {  
  background: #006daa;
  clear: both;
  float: right;
  width: 100%; /* changed */
}

http://jsbin.com/iVEwOxo/2

Answer 4

你想走多远？你真的希望它一直走到最后吗？

首先，在ul上设置width: 100%：

ul {
   background: #006daa;
   clear: both;
   float: right;
   width: 100%;
}

这会将 ul 扩展到页面的末尾。如果您不希望它一直到页面末尾，请向容器添加填充：

.container {
  padding: 0 10px;
}

或者用不同的标签包装 ul ，如下所示：

<div class="container">
  <nav class="main-navigation">
    <ul>
      <li>First</li>
      <li>Second</li>
      <li>Third</li>
      <li>Fourth</li>
    </ul>
  </nav>
</div>

然后添加填充：

.main-navigation {
  padding: 0 10px;
}

这完全取决于您希望它走多远，但通常设置 width: 100% 并在父标签上定义尺寸是使用浮动时制作类似条形的最佳方法。

此外，您应该在您的问题中包含代码示例。链接到外部来源很好，但您也应该将它们包含在您的问题中。