Html float：左属性

在我的网页上，当我使用float:left使导航栏按钮水平排列时，它会使内容向右移动，例如：

[ Home About More ]
                   Text

我希望它是：

[ Home About More ]
Text

有什么建议吗？

您需要在文本中使用clear属性。像这样：

.text {clear:left}

---

使用clearfix解决方案解决问题

更新： 在CSS文件中，添加以下内容：

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

然后在HTML中，将clearfix类添加到浮动元素的父容器中。不确定您的HTML标记是什么样子的，但它可能与clearfix解决方案类似：

<div class="clearfix">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">More</a></li>
  </ul>
</div>

---

这是一个非常常见的问题，我建议像这样定义一个css条目

.clear{clear:两者；}

然后在将来，您可以简单地将这个类添加到需要清除上述浮点数的元素中，或者简单地使用这个类添加一个空div，如下所示

---

或者，这是一个溢出技巧：

<div style="overflow:auto">
   <div style="float:left">[ Home </div>
   <div style="float:left">About </div>
   <div style="float:left">More ]</div>
</div>
Your other text

---

看起来你需要一个clearfix，你能发布代码吗？你可以试着为每个元素使用一个div，将两个div浮动到左边，并将两个div的宽度设置为主div的宽度。我知道，我只是累了！非常感谢你！这是解决该问题的老派方法，也可以，但不是最佳做法，因为您正在添加额外的空HTML标记来解决定位/布局问题。你应该使用一个纯CSS解决方案来修复它，作为最佳实践。我同意空标记是不好的实践，但是，拥有一个可重用的类不是。如何使用一个可重用的CSS类不是更有效和最佳实践？您减少了不必要的HTML标记，并且您使用的类很可能会被多次使用？添加空HTML标记效率低下。在我看来，一个可重用的类是最好的方法。