css关于浮动的问题（导航条的做法）

css中有个属性float,取值为left/right  是让指定的块级元素浮动到一行中。下面用做导航条的的方法让大家了解下浮动，是怎么回事。

第一步：先做几个超链接如下，

效果如下：

我们知道a标签是属于行内标签，所以会在一行，因为要给a标签加边框，设置宽度和高度，所以我们要把a标签变为块级标签并且加以美化，实例如下：

此段代码的意思为把a标签变为块级，把文字设置为居中，鼠标移上变色，效果如下：

最后一个是鼠标移动上去的效果。

下面 我们在超链接后边加个层（div），并设置这个层的大小，背景色，实例代码：

 

设置后整体的效果为：

 

我们发现这个层在超链接的下边，下面我们让超链接浮动了 用float属性。实例代码如下：

当我们让a标签浮动起来后效果如下：

 

发现超链接变为一行了，但是下边的这个层也随着a标签的浮动填充到上边去了。这种现象称为浮动会脱离文档流 （也可以理解我a标签飘起来了，下边变为空的了，所以下边的那个层飘上去了）。  这种现象的解决方法，在a标签下边加上一个层，这个层有个class类选择器 起名为 clear  我们看下clear的写法：

 

我们会看到效果：

  

刚才的层跑到下边去了，这就是导航条的做法。  我想我们都应该知道浮动是怎么回事了吧。