CSS(三)解析盒子模型的浮动

当前位置 : 首页 > 网页制作 > CSS > CSS(三)解析盒子模型的浮动

CSS(三)解析盒子模型的浮动

来源: 作者: 时间:2016-01-23 10:51
上篇博客遗留了浮动和定位两个问题,只是对他们进行了简单的描述,今天仔细透透他们的底细,此篇为浮动篇。 浮动在这个CSS排版流行的年代发挥着越来越重要的作用,

上篇博客遗留了浮动和定位两个问题,只是对他们进行了简单的描述,今天仔细透透他们的底细,此篇为浮动篇。

浮动在这个CSS排版流行的年代发挥着越来越重要的作用,如同aline对定位网页元素的重要性一样,但它比aline更加功能强大。

float主要功能是帮助对象在网页中对齐的,通过不同的命令使对象左右浮动,直到遇到border、padding、margin或其他对象边缘为止。别看这简单的浮动,却可以为我们的排版设计出各种靓丽的风格,下面介绍几种。

我把它们归为了以下两大类:普通浮动和嵌套浮动。

普通浮动又分为none;left和right三种。

1、float:none。默认情况下,都是none的效果,这时的网页元素将按照他们自身的出现方式排列,一般是靠边对齐,按照文本流执行先后顺序排列。

代码:





不设浮动属性的情况