9.4.1　使用float属性实现多栏布局

9.4.1　使用float属性实现多栏布局

float属性可以使元素浮动在文本或其他元素上，可以使用这种技术让文本环绕在图像周围，如图9-15所示（详见6.3节）。也可以使用相同的方法让主题内容向一侧浮动，从而让侧边栏显示在它旁边，如图9-16所示。

图9-15　图文环绕

图9-16　多栏布局

图9-16所示是第3章综合实例中的页面，在第3章中尚未讲到CSS，因此无法做出图中效果，这里使用float属性完成主体内容与侧边栏并列的多栏布局。页面代码结构如下，部分省略：

主体部分是id为content的div，向左浮动；右侧边栏是id为sidebar的div，向右浮动。其他CSS属性在这里省略。代码如下：

由于content设置了向左浮动，因此侧边栏sidebar即使不设置向右浮动，也会靠在content的右侧。事实上，页脚footer也会这样（靠在content的右侧），如图9-17所示。下一小节讲述如何让页脚回到它该在的位置。