完全使用 float 来实现页面的布局是很常见的。这里有一个我之前用 position 实现的布局例子，这次我使用 float 实现了它。
nav {
float: left;
width: 200px;
}
section {
margin-left: 200px;
}这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。
代码实例：
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.container {
border:5px solid #6ac5ac;
overflow:auto;
}
nav {
float:left;
width:200px;
background-color: #d64087;
}
section {
margin-left:200px;
background-color: #fdc72f;
}
footer {
background-color:#96c02e;
}
</style>
</head>
<body>
<div class="container">
<nav>
<ul>
<li><a href="#">static</a></li>
<li><a href="#">relative</a></li>
<li><a href="#">fixed</a></li>
<li><a href="#">absoluted</a></li>
</ul>
</nav>
<section>
这个例子和之前那个外观一模一样。请注意我们在容器上做了“清除浮动”。原本在这个例子中是不需要的，但是当 nav 比非浮动的内容还要高时就需要了。
</section>
<br />
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</section>
<br />
<footer>
</footer>
</div>
</body>
</html>效果图如下：
486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
