css中的float属性以及清除方法 (2011-09-03 17:36:26)

CSS里面的浮动属性是布局的常用工具，只有真正了解它并熟练使用才能将它的优点发挥到极致。

许多页面中都有文字绕图效果，并且各区块分布得错落有置，很多朋友在自学CSS布局时为了做出这些效果往往会被div只能独占一行的默认样式搞的头大，但使用了浮动属性，布局就变得简单、美观了。

任何元素都可以被浮动，段落标签<p>、<div>、<table>、<img>，甚至<span>、<b>、<h1>等等都可以，而且所有被定义为浮动的元素都会被自动变为“块状元素”，也就是我们先前讲过的“盒装模型”，也就是代表它可以定义宽度和高度了。

浮动float的定义方法

CSS中浮动属性的定义是通过float来声明的，它规定了元素是向左靠还是向右靠，有三个值：

left：居左；
right：居右；
none：默认属性，不浮动。

下面我们举个例子：

<div style="float:right;width:100px;height:100px;">

<p style="float:right;width:50px;background:#F00;">文字</p>

</div>

上面的例子将最外面的div置于右方，将内部的段落也置于div内部右方，就这样做到了内容的浮动。

水平浮动的层叠

如果将A元素居左放置在页面最左端，在它的后面跟随一个居左浮动的B元素，那么B元素就是贴着A元素排列的，以此类推，在水平宽度允许的条件下，可以放置多个居左浮动的元素，直到宽度没有多余的空间时，居左浮动的元素会绕到下一行的左侧显示。

举例：

html代码如下：

<ul>

<li>float01</li>

<li>float02</li>

<li>float03</li>

<li>float04</li>

<li>float05</li>

<li>float06</li>

<li>float07</li>

<li>float08</li>

</ul>

CSS代码：

ul {

width:500px;

background:#000;

padding:5px;

}

li {

float:left;

border-right:1px solid #000;

height:20px;

padding-right:100px;

background:#FFF;

margin-bottom:1px;

}

　　以上代码的显示效果应该是一排水平排列的<li>，在超出宽度时，会折行显示，为了分清界限，我给它定义了一条右边线。

这种思路就是布局、列表排列的雏形。

清除属性-clear

　　吃了毒药，就一定要有解药。学会了怎样使用浮动属性，那必须学会怎样清除浮动。

　　清除属性通过clear来声明，它同样有四个值：

clear:left;清除左侧。
clear:right;清除右侧。
clear:both;清除两侧。
clear:none;不清除。

clear要达到的效果是，一个被清理的盒状元素无法与前置浮动保持在同一个水平位置上。它必须出现在其下方。

举例说明一下：

<div style="float:left; background:#F00;">顶部第一个div向左浮动，无清除效果</div>

<div style="clear:right;">第二个div清除右侧内容</div>

<div style="float:left;">第三个div，无清除效果，居左浮动</div>

<div style="float:left;">第四个div，无清除效果，居左浮动</div>

　　看看上面这个例子，也许你会明白一点，如果想让第二个div单独处于一行，只要把clear的属性值改为both即可。

一般情况下，清除功能可以达到预想效果，但是有时会出现些小的错误，这通常是浏览器的差别造成的，以后我会教大家如何弥补这些小错误。

喜欢

赠金笔

阅读(561)┊ 评论 (0)┊ 收藏(0) ┊转载 (0) ┊ 喜欢▼ ┊打印┊举报

已投稿到：	排行榜

前一篇：2011年09月03日

后一篇：span的属性特点