CSS分栏布局的办法:必定定位和起浮

在CSS中，完成分栏布局有两种办法。第一种办法是运用四种CSS定位选项中的必定定位（absolute positioning），它能够将文档中的某个元素从其本来方位上移除，并重新定位在希望的任何地址之上。第二种则是运用CSS中的起浮（float）概念。

 

　　必定定位或起浮都能够用来完成分栏作用。二者能够独立运用，也能够结合在一起，相辅相成。

 

　　1、必定定位

 

　　必定定位的优势在于，咱们能够丝毫不差地精确控制任何元素的方位—这里面没有什么需求猜测或许命运的成分。由于应用了必定定位的元素被不留痕迹地从惯例文档流中完全移除，所以它也不会为其他元素带来任何的影响。

 

　　那么让咱们试一试用必定定位怎么完成下面的布局。

 

　　这是一个三栏的布局，并且是居中显现的。其间，A栏是主体内容栏，B栏和C栏都是侧边栏。首先，咱们不可能直接用必定定位将A、B、C三栏定位到居中的方位，由于每个人显现器的分辨率是不同的，在1024X768分辨率的显现器上定位的居中作用，在别的分辨率的显现器上看到的作用必定不会是居中显现的，那么，该怎么处理这个问题呢？

 

　　幸好，在必定定位模型中有个极为有用的特性，那就是：若某个必定定位元素的容器也被定位过，那么该元素指定的top和left值将不会依据文档的根元素html（也就是浏览器窗口的左上角）核算，而是会依据其容器的左上角核算这个偏移量。换句话说，也就是：被定位过的容器将扮演其间一切元素必定定位起始点的角色。

 

　　所以，运用这个特性，咱们给A、B、C栏的外部加上一个容器D，如下图：

 

　　然后，咱们让容器D居中，并给它加上一个特点：position:relative，这样，再用必定定位定位A、B、C的top和left值，A、B、C的方位就会依据容器D的左上角的方位来核算了，这样就能够完成咱们希望的三栏居中的作用了。

 

　　可是，咱们常用的布局并没有这么简略，除了三栏之外，咱们还需求一个页头和一个页脚，如下图：

 

　　这时候，再用必定定位布局就行不通了，由于必定定位的元素会从文档流中完全移除，这时，页脚会紧挨着页头，显现在页头的下方。

 

　　如果咱们一定要选用必定定位的话，那么有必要预先知道这三栏中每一栏的高度，然后再依据其间高的一栏定位页脚。若是任意一栏中的文本长度无法确定的话，除了运用JavaScript，咱们也只能放弃必定定位的想法，转而投入到起浮布局的怀有。

 

　　2、起浮

 

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

 

　　起浮的语法虽然简略，但却不那么容易把握，下面让咱们举例阐明怎么用起浮来进行布局。相同，咱们要完成一个带页脚的三栏布局。如下图：

 

　　怎么用起浮完成这样的作用呢？其实很简略：

 

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

 

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

 

　　3、给页脚设置clear特点

 

　　需求阐明的是，起浮布局仍然遵从惯例文档流，所以与必定定位比较，起浮定位时HTML源文件中元素声明的方位显得分外重要。 当然，处理这个问题的简略的办法就是在源文件中交换左栏和右栏的声明次第，也有办法不必交换各栏的次第也能够完成相同的布局，可是，这就要用到一种比较不流畅的运用负边距值的办法。一般情况下，人们十有八九会选择交换源文件中左中两栏的声明次第。