3

我有一个 div（导航），它是“float:left;”。在这个 div 主要内容之后。第二个 div 超过第一个。

如果我添加 style="clear:both;" 在第一个差异之后，它就可以工作了。但是，我想知道这是否是正确的方法，这是我唯一的问题。

<div class="nav">
    <ul>
        <li><a href="">text</a></li>...
    </ul>
</div>
<div style="clear:both;"></div>
<div id="content-wrapper"></div>    

.nav{
    width: 100%;
    float: left;
    margin: 0 0 3em 0;
    padding: 0;
    list-style: none;    
}

.nav li{
    float: left; 
    margin: 0 2px;
}

.nav li a{        
    display: block;
    padding: 8px 15px;        
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    border-right: 1px solid #ccc; 
    background-color: #3b3d49;
    -webkit-border-radius: 7px 7px 0px 0px;
    border-radius: 7px 7px 0px 0px;
 }
4

6 回答 6

3

是的，这很好用。但是，您不需要另一个元素来清除内容，您可以将样式添加到内容包装器中。

在您的样式表中：

#content-wrapper { clear: both; }

overflow另一种方法是在浮动元素周围添加一个容器，并使用以下样式使其包含其子元素：

<div class="nav-container">
  <div class="nav">
    <ul>
      <li><a href="">text</a></li>...
    </ul>
  </div>
</div>
<div id="content-wrapper">
</div>

然后在您的样式表中添加：

.nav-container { overflow: hidden; }
于 2013-03-22T12:13:03.440 回答
2

上面提到的主要用途"clear:both"

clear 属性指定元素的哪些边不允许其他浮动元素。

"clear:both"

表示左侧或右侧都不允许浮动元素。

于 2013-03-22T12:12:49.823 回答
1

在回答您的问题时，使用清洁浮动clear:both;是一种非常标准的方法，是的。

于 2013-03-22T12:12:47.353 回答
1

这是最好的方法，只需将 class .group 添加到您的容器中

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}
于 2013-03-22T12:12:48.077 回答
1

是的，从 html 的创建者那里看到这个例子是正确的

http://www.w3schools.com/cssref/pr_class_clear.asp

于 2013-03-22T12:14:40.607 回答
1

你可以用<br clear="all" />短手。另一种方法是您可以使用 clearfix 方法，您可以在 google 上搜索它以获得最佳效果。这是@conner 解释的方法。

于 2013-03-22T12:22:30.610 回答