本文介绍如何使用CSS的float属性实现导航栏布局，并探讨了几种常用的清除浮动方法及其优缺点。
声明：本人初学者，其他初学者看到此文请酌情模仿。
一，用float属性制作导航栏。
前几天看到张鑫旭老师的博客，把里面关于float属性还有position属性的几篇文章都通读了一遍，张老师把float属性比作在天上飞来飞去的魔鬼。可能是因为我学习CSS的时间太短，还没能get到float属性的恶魔之处，倒是用float属性能轻松的实现导航栏及两栏布局的效果。 不过钻研float属性几天了，也仅仅做到能用它做导航栏的程度，进度缓慢，还是要继续加油！
昨天下午照着“凤凰网”的布局简单的做了一下页面顶部的几个导航栏。（有一些按照自己的想法做的小小改动）以下为效果：
这是凤凰原版：
以下为本人模仿的：
接下来是HTML和CSS部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动制作导航栏</title>
<style type="text/css">
*{margin:0px;padding:0px;list-style:none;font-family: SimSun,Arial;}
#navbg {width:100%;height:40px;background:#f54343; clear:both;}
#nav{ width:1000px;height:40px; margin:0px auto;}
#nav ul li{float:left; height:40px;width:98px;line-height:40px; text-align:center;}
#nav ul li a{text-decoration:none;display:block;color:#fff; font-size:20px;}
#nav .fengebg {display:block; height:40px; width:2px; }
#nav li a:hover {color:#7f7878; background:url(images/mousebg.png) no-repeat; }
#top {width:1000px; height:60; margin:0 auto;}
#header{float:left; width:160px;height:66px;}
.top_right {float:right; width:212px; height:14px; margin:43px 0px 9px 0px;}
.top_right .right_top {float:left;}
.top_right .jiange {width:1px; height:14px; background:url(images/jiange.png) no-repeat;}
.top_right #login {width:66px; height:14px;background:url(images/login.png) no-repeat;}
.top_right #search {width:54px; height:14px; background:url(images/search.png) no-repeat;}
.top_right #shewei {width:90px; height:14px;background:url(images/shewei.png) no-repeat;}
.top_right .right_top #denglu {font-size:12px; padding-left:32px;}
.top_right .right_top #sousuo {font-size:12px; padding-left:25px;}
.top_right .right_top #shouye {font-size:12px; padding-left:31px;}
.top_right .right_top a {text-decoration:none; color:#333333;}
.top_right .right_top a:hover {text-decoration:underline; color:#333333;}
#nav_sec {width:989px; height:38px;margin:0 auto;}
#nav_sec ul li{float:left; width:43px; height:38px; background:url(images/jiange2.png) no-repeat; }
#nav_sec ul li a {display:block; text-decoration:none;color:#2b2b2b; text-align:center;line-height:38px;}
#nav_sec ul #nav2_firstli {background:none;}
#advertisement1 {width:1000px;height:165px; background-color:#f1f1f1;margin:0 auto; border-top:1px solid #dfdfdf;border-bottom:1px solid #dfdfdf;}
#advertisement1 #top_ad {width:980px; height:100px;margin:10px 10px 9px 10px;}
#advertisement1 #top_list {width:980px; height:55px;margin:0px auto;}
#advertisement1 #top_list li {float:left; width:145px; height:22px;font-size:12px; overflow:hidden; }
#advertisement1 #top_list a {display:block; color:#6b8295; text-height:11px; text-decoration:none; }
#advertisement1 #top_list ul {width:1050px; height:22px;}
</style>
</head>
<body>
<div id="top">
<div id="header">
<img src="images/logo.gif" alt="凤凰网LOGO"/>
</div>
<div class="top_right">
<div class="right_top" id="login">
<p id="denglu"><a href="#">登录</a></p>
</div>
<div class="jiange right_top"></div>
<div class="right_top" id="search">
<p id="sousuo"><a href="#">搜索</a></p>
</div>
<div class="jiange right_top"></div>
<div class="right_top" id="shewei">
<p id="shouye"><a href="#">设为首页</a></p>
</div>
</div>
<br style="clear:both;"/>
</div>
<div id="navbg">
<div id="nav">
<ul>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">国际</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">亚洲</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">非洲</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">欧洲</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">美国</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">中国</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">日本</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">韩国</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">英国</a></li>
<li class="fengebg"><img src="images/fengebg.gif"/></li>
<li><a href="#" title="">法国</a></li>
<br style="clear:both;"/>
</ul>
</div>
</div>
看官见笑。 写布局的时候稍微一多就乱了，头绪变的模糊，就像小时候拼puzzle一样：胡乱开局，慌忙拼凑。css部分更是混乱不堪。
问题：1， 通篇ID，导致写了很多不必要的CSS。
2，结构不合理，东拼西凑，没大局观。
3， 可能是用prt sc键印屏幕到ps测量的时候没量精确，最后在效果和原凤凰网之间切换的时候回整体右移几个像素。
4，清浮动一律用的空元素<ba>方法。
肯定还有许许多多的问题。如果有看官看到这篇幼儿园水平小博文请指正，拜谢。
二， 清浮动的几种方法。
写到这里就有点抄袭的意思了，毕竟清浮动的方法都是前辈总结的，我也就是拿来用。之所以还是写在原创中，是因为我想通过打字再敲一遍方法让自己记得更加牢固。
1， 添加额外标签。如<div style="clear:both;"></div> 或者<br style="clear:both;"/>
好处：能实现清浮动的效果。
缺点：增加无意义的标签，有违结构与表现分离的原则。
2， 父元素设置 overflow:hidden.
父级<div style="overflow:hiden; zoom:1;"></div>
优点：不存在结构和语义化的问题。
缺点：内容多时被隐藏，无法显示溢出元素。
3， 父级元素设置 overflow:auto.
优点：同上。
缺点：内容多时出现滚动条。
4， 父级元素也设置浮动。 缺点是父级元素的周围元素会因此受到影响，从而影响布局。
5， 父级元素设置display:table 。
6， 使用;after 伪元素。
<div class="main clearfix">
<img src=""/>
<p >some text</p>
</div>
CSS为：
.main { }
.main img {float:left;}
.main p {float:right;}
.clearfix {
content="1";
display:block;
height:0px;
clear:both;
visibility: hidden;
}
.clearfix {zoom:1;}
清浮动的原理是元素通过自主改变自己的上外边距来控制与浮动元素的距离，因此给元素设置上外边距后再清浮动的话，本来设置的上外边距就会无卵用了。
《<完>》
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
