Question

在我的网页上，当我使用浮动时：左侧为导航栏按钮（为了水平排列），它会在向右移动后生成内容，例如：

[ Home About More ]
                   Text

我希望它是：

[ Home About More ]
Text

有什么建议吗？

Answer 1

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

.text {clear:left}

Answer 2

使用clearfix解决方案解决问题。

http://themergency.com/css-clearfix-demystified/

更新：在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>

Answer 3

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

.clear {clear:both;}

然后将来你可以简单地将这个类添加到需要清除上面浮点数的元素中，或者只是添加一个空类div，就像这样。

<div class="clear"></div>

Answer 4

或者这适用于（溢出技巧）：

<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

float：左边的属性

4 个答案: