我有一个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;
}
答案 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
的创建者那里看到这个例子是正确的答案 5 :(得分:1)
您可以使用<br clear="all" />
作为简写。另一种方法是你可以使用clearfix方法,你可以在谷歌上搜索最好的。这是@conner解释它的方法。