0 Comments

CSS分栏布局的两种方法:绝对定位和浮动(2)

发布于:2013-08-24  |   作者:广州网站建设  |   已聚集:人围观

2、浮动

浮动的本意是要将插入到文章中的图片向左或者向右浮动,使图片下方的文字自动环绕在它的周围,使图片的左边或者右边不会出现一大块的留白。

浮动的语法虽然简单,但却不那么容易掌握,下面让我们举例说明如何用浮动来进行布局。同样,我们要实现一个带页脚的三栏布局。如下图:
广州网站建设,网站建设,广州网页设计,广州网站设计


◆如何用浮动实现这样的效果呢?其实很简单:

1、设定E的宽度,让E居中

2、设定A、B、C的宽度,将A、B、C分别向左浮动

3、给页脚设置clear属性
广州网站建设,网站建设,广州网页设计,广州网站设计

需要说明的是,浮动布局依然遵循常规文档流,所以与绝对定位相比,浮动定位时HTML源文件中元素声明的位置显得格外重要。当然,解决这个问题的最简单的方法就是在源文件中交换左栏和右栏的声明次序,也有方法不用交换各栏的次序也可以实现同样的布局,但是,这就要用到一种比较晦涩的使用负边距值的方法。一般情况下,人们十有八九会选择交换源文件中左中两栏的声明次序。

标签:
飞机