Question

我对css clear float有疑问。

我的问题是，当我向所有页面声明div{float:left;}时，在某些方面，我仍然需要屏幕的某个div显示中心，例如width:960px;margin:0 auto。如何清除这个div's浮动？

请参阅http://jsfiddle.net/37wnT/中的代码并在http://jsfiddle.net/37wnT/show/

中查看

我需要div#nav和div#content屏幕的这两个div中心，但其他div仍然遵守规则float:left;

Answer 1

我稍微修改了你的代码。看看。

<html>
<head>
<style>
div.main{float:left;}
#header{width:100%;height:100px;}
#nav{clear:both;width:800px;margin:0 auto;}
.nav{width:200px;text-align:center;font:16px/150%;}
#wrap{width:100%;height:100%;}
#content{clear:both !important;width:960px;height:100%;margin:0 auto;}
.col{width:300px;height:300px;margin:0 10px 0 10px;background:red;display:block;}
</style>
</head>

<body>

<div id="header">
    <div id="nav">
        <div class="nav main">home</div>
        <div class="nav main">info</div>
        <div class="nav main">products</div>
        <div class="nav main">cantact</div>
    </div>
</div>
<div id="wrap">
    <div id="content">
        <div class="col main" >ds</div>
        <div class="col main">ds</div>
        <div class="col main">ds</div>
    </div>
</div>
</body>
</html>

Answer 2

这是新的jsfiddle

<div id="content">
    <div class="col">1</div>
    <div class="col" >2</div>
    <div class="col" style="clear:left;margin-top:10px">3</div><br> <-- changes here
</div>

我不确定这是不是你想要的。

CSS清除浮动

2 个答案: