域名注册

中文域名
英文域名
通用网址
域名解析
域名转入\转出

虚拟主机

主机购买
管理主机
FTP上传
数据库管理
主机续费升级

网站建设

建站流程介绍
网站设计
网站改版
网站维护
网站推广

企业邮局

邮箱使用
管理邮箱
邮箱续费升级
全球邮局

网站优化

seo优化
seo技巧
收索引擎优化
关键词优化

网站备案

备案流程指南
修改备案
备案资料下载
备案小技巧

服务器租用

服务器租用
服务器托管

其它服务

400电话
在线客服
财务常见问题
会员常见问题

您现在的位置：创新互联 >> 网站建设 >> 网站建设常见问题 >> CSS元素定位之float定位

CSS元素定位之float定位

作者：谭小姐文章来源：网站制作设计部点击数：1612 更新时间：2009-9-14
应用Web标准创建网页以后。float浮动属性是元素定位中非常重要的属性，常常通过对DIV元素应用float浮动来进行定位，不但对整个版式进行规划，也可以对一些基本元家如导航等进行排列。
语法：
float:none | left | right
其中，none是默认值，表示对象不浮动;left表示对象浮在左边;right表示对象浮在右边。
Css允许任何元素浮动float，不论是图像、段落还是列表。无论先前元素是什么状态，浮动后都成为块级元素。浮动元家的宽度狱认为auto.
float属性不是你所想象的那么简单，不是通过这一篇文字的说明。就能让你完全弄明白它的工作原理，需要在实践中不断总结经脸。下面通过小例子.来说明它的基本情况。
如果float取值为non。或没有设里float时.不会发生任何浮动.块元素独占一行，紧随其后的块元素将在新行中显示.其代码如下:
<html xmlns-"http://www.86215.com/1999/xhtml">
<head>
<meta http-equiv-"Content-Type一content-"text/html; charset-gb2312"/>
<title>没有设置float时</title>
<style type="text/css">
#content_ a{width:250px; height:100px; border:2px solid #000f00; margin:l5px;background: #0ccc00;>
#contentee b{width:250px; height:100px; border:2px solid #000f00; margin:l5px;background: #ff0000;} </style>
</head>
<body>
<div id-"content-a">这是第一个。DIV</div> <div id-"content_b">这是第二个
DIV</div>
</body>
</html>
在浏览器中浏览，可以看到由于没有设置DIV的float属性.因此每个DIV都单独占一行，两个DIV分两行显示。
上海网站建设下面修改一下代码，使用float：left对content a应用向左浮动.而content b不应用任何浮动，其代码如下:
<html xmlns-"http://www.86215.com/1999/xhtml">
<head>
<meta http-equip="Content-Type" content-"text/html;charset-gb2312"/>
<title>一个设置为左浮动，一个不设置浮动</title>
<style type-"text/css">
#content_a{widh:250px; height: 100px; float: left; border:2px solid#000f00;margin:l5px; background:#0ccc00;}
#content_b{width: 250px; height: 100px; border:2px solid #000f00; margin: 15px;back ground:#ff0000;}</style>
</head>
<body>
<div id-"content-a">这是第一个DIV向左浮动</div>
<div id-"content少一>这是第二个DIV不应用浮动</div>
</body>
</html>
成都网站建设在浏览器中浏览.可以看到对content.应用向左的浮动后.向左浮动，content b在水平方向紧跟着它的后面，两个DIV占一行并列显示。
上一篇文章：如何利用Dreamweaver制作页面模板
下一篇文章：如何安装IIS和配置Web服务器

分享到： QQ空间新浪微博腾讯微博人人网开心网百度搜藏腾讯微博网易微博