用浮动清除DIV

时间:2013-03-22 12:10:12

标签: css

我有一个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;
 }

6 个答案:

答案 0 :(得分: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; }

答案 1 :(得分:2)

上述"clear:both"

的主要用途

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

"clear:both"

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

答案 2 :(得分:1)

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

答案 3 :(得分:1)

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

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

答案 4 :(得分:1)

是的,从html

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

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

答案 5 :(得分:1)

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