用浮子向右清除并不延伸到最后

Question

我正在尝试创建标签example，但由于某种原因，即使使用clear: both;，蓝色背景也不会延伸到最后。无论我有float: right;还是float: left;，它的行为都相同。有人可以帮我吗？

Answer 1

这是因为ul上的默认填充。

在大多数浏览器中，ul都有padding-left 40px来为子弹点分配间距。

jsFiddle example - 删除填充

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

此外，请删除clear:both，因为在此实例中没有任何效果。

<强>结果：

  

... 到 ...   

Answer 2

只需使用

overflow:auto;

容器上的

：http://jsbin.com/UfIYOWaD/1/edit

之所以发生这种情况，是因为非浮动元素无法判断浮动子元素的大小，除非被强制使用。

Answer 3

如果您希望蓝色背景跨越整个屏幕，则需要设置width（100%容器）的ul至li。

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

http://jsbin.com/iVEwOxo/2

Answer 4

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

首先，在ul：

上设置宽度：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;
}

这一切都取决于你想要它走多远，但通常设置宽度：100％并在父标签上定义尺寸是使用浮动时制作这样的条形图的最佳方法。

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