浮动是CSS布局非常强大的布局功能,也是理解CSS布局的关键问题所在。在CSS中,包括div在内的任何元素都可以使用浮动的方式进行显示。
浮动是一种非常有用的布局方式,它能够改变页面中对象的前后流动顺序。这样做的好处是,使得内容的排版变得简单,具有良好的仲缩性。举个例子,左右分栏的布局,左栏宽度为300px。如果使用一种相对的布局方式,我们可以使右栏显示在距左边300px的位置,这样可以使右栏贴着左栏进行显示。
一旦设计被改变,例如left的宽度由300px变为100px,就意味着right的定位需要重新设定。而使用浮动式布局方式后,当我们指定左栏的浮动为left,意味着其右方的内容将流入左栏的右边,而且能够根据左栏的宽度自动流入并贴进左栏,贴进的程度则靠左栏的右边距或者右栏的左边距来控制,而不依赖于对象本身的宽度值。浮动式布局使页面的大部分内容都可以由浏览器自动调节,使我们能够专注于样式设计而非其相互之间的浮动关系,我们只需要简单地设置浮动方向,即可完成对象的布局分布。
这样,在动用了简单的float属性之后,二列固定宽度的布局就能够完整的显示出来。
还没有评论,来说两句吧...