青岛网站建设、青岛网站制作/设计 - e灵犀工作室

网页布局中的浮动是所有前端设计的一个永恒不变的话题，透彻及全面的了解浮动布局的含义对网页设计有着至关重要的作用。青岛网站建设通过翻译Cris Coyies的文章，结合自己的前端开发经验来讲解浮动的使用。

 

一、什么是“浮动”。

浮动是CSS中元素的一个定位属性。例如一个图文混排的页面中，一副插图尺寸的宽度没有整个页面的宽度那么宽，这个时候我们就需要在图片剩下的宽度部分填充文字。那这个时候这幅图片就可以浮动在左边或者右边。这样的浮动概念非常类似于网页设计中的浮动。

而，绝对定位的元素是不能浮动的，除了它的父元素，它不会受到周围元素的影响。

 

二、浮动的作用。

正如上面提到的，浮动可以用来设置网页的布局。看下面的图片：

 

这里的布局中使用了float:right，那在CSS编写过程中我们可以将maincontent的内容写在前面，而将sidebar的内容写在后面，这样做的好处显而易见，就是将重要的内容先读取出来。无论是对于读者还是对于蜘蛛都是有利的。

 

三、清除浮动。

很多时候我们使用浮动布局之后，又增加了一个通栏的层或元素，结果忘记了清除浮动，造成的结构就是在某些浏览器中显示是正常的完全没有问题，但是到了其他的一些浏览器里面再来看这个网页，布局就完全错乱了。如下

 

当我们使用为#footer增加属性{clear:both;}之后，就可以达到我们想要的正确效果了。

Clear总共有四个属性，both属性用来清除双向的浮动，也是最常用的一个属性。left和right属性分别被用来清除两个方向的浮动。None是其默认属性，在没有进行任何设置时的属性。Inherit可以说是clear的第五个属性，但是IE并不支持此属性，不建议使用。清除单方向的浮动也很少被用到，但是肯定也有它自己的用处。

 

四、关于浮动的BUG

一个棘手的问题就是关于浮动元素的父元素显示效果。如果一个父元素只包含浮动元素，那么父元素的高度不会被撑开，而如果恰巧父元素又没有背景，我们不会察觉这个BUG，因为外表上看上去一样。来看下面的图片：

 

父元素中的所有元素都是浮动布局，结果导致父元素容器的高度没有被撑开，如果父元素有边框或者背景，我们就可以很明显的看到这个问题了。此时，如果我们在父元素下面增加一个block元素，那结果就是直接显示在了该元素的下方，而不是子元素的下方，因为父元素的容器高度并没有撑开。碰到这种情况的做法就是为父元素设置属性Overflow:hidden;这样就可以实现撑开容器高度的目的了。

 

五、清除浮动的方法

1、使用空的DIV标签，在需要清除浮动的层的下方增加<div style="clear:both;"></div>.这种方法是最好的选择，当然有时候有些人喜欢使用<br />、<p></p>等元素，但是我想说的是div是最好的选择，因为这不会出现浏览器兼容问题，div没有任何默认的属性。

2、使用Overflow属性来清除浮动。这种方法不会让你额外的增加任何标签，正如第四条描述的一样，它可以撑开容器的高度。但是同时你需要小心的使用它，因为这个属性可能会隐藏你本不想隐藏的内容，或者导致出现滚动条。

3、通过一个简单的样式表来清除浮动。这种方法也是比较合适的选择，我们可以在样式表中统一定义一个用来清除浮动的样式，然后在需要清除浮动的元素中增加这个样式。代码如下：

 

 

 六、关于浮动的更多问题

1、元素下移。当你的布局出现这样的显示时，那你就需要检查是否使用了overflow:hidden隐藏了超出部分，一般情况下都是这个原因导致的。

 

2、双倍边距BUG，更多关于双倍边距BUG的处理方法可以参照 IE6兼容性大全。

3、三像素BUG，这个也是IE下著名的浮动布局导致的一个BUG：当文本紧邻浮动元素之后就会出现神秘的3像素BUG。其实处理方法很简单，就是给这个文本元素设置一个宽度或者高度即可。

4、IE家族中IE7哥哥特有的底部边距BUG：当一个浮动的父元素中包含的子元素全部使用浮动布局的时候，子元素的底部外边距margin-bottom会被忽略，解决方法就是使用底部的内边距padding-bottom代替。