Question

我有一个div（导航）是“float：left;”。之后这个div的主要内容来了。第二个div来自第一个。

如果我添加style =“clear：both;”在第一个dif之后，它就可以了。但是，我想知道这是否是正确的方法，这是我唯一的问题。

<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;
 }

Answer 1

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

在你的样式表中：

#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; }

Answer 2

上述"clear:both"

的主要用途

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

"clear:both"

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

Answer 3

在回答你的问题时，使用clear:both;清理花车是非常标准的做法，是的。

Answer 4

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

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

Answer 5

是的，从html

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

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

Answer 6

您可以使用<br clear="all" />作为简写。另一种方法是你可以使用clearfix方法，你可以在谷歌上搜索最好的。这是@conner解释它的方法。

用浮动清除DIV

6 个答案: