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

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

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

任何元素都可以被浮动,段落标签<p>、<div>、<table&gt;、<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即可。

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

分享:
 

0

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

0

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

 
阅读(561)┊ 评论 (0)┊ 收藏(0) ┊转载(0) ┊ 喜欢 ┊打印举报
已投稿到:
 
前一篇:2011年09月03日
后一篇:span的属性特点
上一篇:网络编程基础【day09】:socket实现文件发送(六)


下一篇:Swing-setBorder()用法-入门