9.5.1　float属性以及column-count属性的缺点

9.5.1　float属性以及column-count属性的缺点

1.float属性的缺点

使用float属性以及clear属性可以实现多栏布局，但是每个栏目条的高度随栏目中内容多少的不同而不一致，从而导致多个栏目底部不能对齐，尤其当每个栏目都设置了背景颜色或背景图片时。

在下例中有3个栏目，分别是左侧边栏、中间内容和右侧边栏。

使用float属性将它们设为并列放置，并设置不同的背景颜色，如图9-20所示。

图9-20　使用float属性进行布局

代码如下：

可以看出，在没有设置高度时，div的高度由装入其中的内容多少决定，使用float属性，左、右两栏或多栏底部并没有对齐，当它们有不同的背景颜色或图片时尤其显得突兀。

2.column-count属性的缺点

对于column-count属性而言，虽然可以设置高度相等的两栏或多栏布局，但多个栏目的宽度是均等的，不可以将不同栏目设为不同宽度。另外，使用column-count属性进行布局时，也不能具体指定哪个栏中显示什么内容。

在上例中采用column-count属性设置多栏布局，去除left-sidebar、content、rightsidebar中的float和width属性，在wrapper中添加column-count属性，效果如图9-21所示，代码如下：

图9-21　使用column-count属性设置多栏布局

可以看出，wrapper中左侧边栏、中间内容和右侧边栏的内容在3个栏目中平均分成了等宽的3份，且无法控制每个栏目中显示内容的多少。