关于div布局中float的使用

  为什么要浮动呢?我是这么认为的。

  Css里有两种对象(好像有3种的,但是主要用两种)就是块级元素和内联元素;

Div就是块级元素,一个div占据一行,有两个div就需要用到两行,但是我们通常用div来布局,这就需要用到浮动。

  

  

  要达到这样的效果就需要用左浮动float:left;

<div class=’left’>div1</div>
<div class=’left’>div2</div>
<div class=’left’>div3</div>

  css设置为:

.left{ float:left }

这样三个div就依次从左向右进行排列(当然这是在宽度足够的情况下,如果宽度不够,那个div3就要被挤到下一行去了)。 同理:float:right 就是从右往左排了。

   但是如果这3div下面还有第四,第五个div,我们又不需要它们向上图一样从左往右排列,想要恢复成块级元素那样,一个div占一行的情况,那么我们就需要用到clear属性。

  

<div class=’left’>div1</div>
<div class=’left’>div2</div>
<div class=’left’>div3</div>
<div class=’clearFloat’>div4</div>
<div>div5</div>

  css设置为:

.clearFloat{ clear:left;}  

我们经常看到很多直接用clear:both,这个就是指把两个浮动(leftright)都清除掉,恢复成块级元素的特征。 

  另外,还有一种内联元素,比如span,它就不是一个元素占一行,有多个span的话,它们就分布在同一行。但是为什么不能用span来布局呢,因为内联元素不能设置高度,就是一个行的高度。

posted @ 2010-01-15 10:48  西江月  阅读(1094)  评论(0编辑  收藏  举报