原创CSS网页布局十浮动属性

CSS学习地方：http://www.52css.com/

 

上节我们学习了,文本流的概念,知道了在文档中,默认的元素排列方式是竖向排列.

而现实中,我们不可能将所有的元素都上下排列,所以我们要可以改变文本流.让元素可以横向排列.

 

于是,本节的主题出来了.

如何使文本流改变？

答案是：浮动属性.

 

选择器{

属性:属性值;/*声明*/

}

 

浮动属性[float]是用来并排排列内容的.它有三个属性值：left,right,none.

 

前面叉子为大家制作的[XHTML资料表]大家还有保存吧？这个里面基本上把网页中经常出现的元素标签都列出来了.在这里,我们对里面的内容进行一下分类.

 

[分类：根据需要目的来分类.人名.可以根据笔画的多少来分类.还可以根据姓的首字母来分类.]

 

块元素与内联元素

 

块元素是指div,p,h1-h6,hr,ul,li这类的元素.其特点是,每个块元素都是新的一行开始,一般可以包含其他的块元素和内联元素.在CSS中,可以给块元素加上浮动属性,控制块元素的显示位置,而不必总是从新的一行开始.

 

内联元素则是指如a,span,b,strong,img等这类的元素.其特点是,不必在新的一行开始.同时,也不强迫其他的元素在新的一行显示.内联元素可以做其他元素的子元素.在CSS中,给内联元素加上display:block属性,就具有了块元素的特性.

 

[内联元素默认的文本流是自左向右横向排列,直至占满其容器的宽度,才会换行.块级元素则是默认自左上向左下纵向排列.直至占满其容器的高度后,会出现一些效果,如滚动条.]

 

再次总结：块元素水平方向会占据所有可用空间.内联元素则不会.

 

我们来学习本节的主角：float属性.

 

其具有三个属性值：

 

left 左浮动

 

right 右浮动

 

none 不浮动

 

现在,float属性的作用就变的更加明显了,主要是,float属性用来把一个元素放置在一个或者多个其他元素旁边.

 

⒈当块级元素增加了浮动属性以后,它就允许在其旁边并行放置其他的任意元素.

⒉设置左浮动,右边可以存在其他元素.[而左边不行].同样,设置右浮动,左边可以存在其他元素[而右边不行.]

⒊浮动元素的对齐方式.

上一篇：原创CSS网页布局[九]外边距折叠与预防

下一篇：DIV+CSS仿站需求