Css 用浮点数结算DIV

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

如果我在第一个dif之后添加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;
 }

。。。

.导航{
宽度：100%；
浮动：左；
保证金：0.03亿元；
填充：0；
列表样式：无；
}
李国荣先生{
浮动：左；
边际：0.2px；
}
李娜先生{
显示：块；
填充：8px 15px；
文字装饰：无；
字体大小：粗体；
颜色：#fff；
右边框：1px实心#ccc；
背景色：#3b3d49；
-webkit边界半径：7px 7px 0px 0px；
边界半径：7px 7px 0px 0px；
}

在回答您的问题时，使用

清除：两者

是一种非常标准的方法，是的。

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

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

---

上述

的主要用途是“clear:tware”

clear属性指定不允许使用其他浮动元素的元素的哪一侧

"clear:both"

---

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

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

在样式表中：

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

---

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

---

您可以使用

作为简写。另一种方法是，你可以使用clearfix方法，你可以在谷歌上搜索最好的方法。这就是@conner解释的方法。

如果您希望元素正确地显示在它们下面，则需要清除浮动元素。据我所知，浮动元素非常精细且正确。通过W3c验证器…我认为关于最佳实践的问题更合适。你们有3个div在彼此下面？为什么不从第一个div中删除

float:left

，而不是在第二个div中添加

clear:both

？

.nav-container { overflow: hidden; }