用浮动清理DIV

我有一个div（导航），它是“float：left;”。这个div的主要内容来之后。第二个div来自第一个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; 
}

来源

2013-03-22 renathy

明确：两者都可以 – 2013-03-22 12:12:00

浮动元素需要清除，如果你想让元素在它们下面正常显示 – Pete 2013-03-22 12:12:24

据我所知，它的罚款和正确。把它通过一个W3C验证... – DavidB 2013-03-22 12:12:45

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

在样式表：

#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-22 12:13:03 Guffa

在回答你的问题，清理漂浮跟clear:both;是这样做的一个非常标准的方式，是的。

来源

2013-03-22 12:12:47 rhughes

这是最好的方式，只需添加类。集团要将容器

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

来源

2013-03-22 12:12:48 iConnor

主要采用上述"clear:both"

clear属性指定了一个元素的两侧，而其他浮动元素不允许。