chengxuetao
- 浏览: 1649969 次
- 性别:
-
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非
常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。
我们来看看float属性基本释义：
该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于
block。也就是说，浮动对象的display特性将被忽略。
float属性的参数：
none：对象不浮动
left：对象浮在左边
right：对象浮在右边
下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如
下图：
我们看下面的运行效果：
Source Code to Run [www.52css.com]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"
/><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; border:1px
solid #000;margin:10px; background:#ccc;} #content_b {width:200px;
height:80px;border:1px solid #000; margin:10px; background:#999;}
</style></head> <body> <div
id="content_a">52CSS.com这是第一个DIV</div> <div
id="content_b">52CSS.com这是第二个DIV</div> </body>
</html>
[ 可先修改部分代码 再运行查看效果 ]
[ 可先修改部分代码 再运行查看效果 ]
我们对content_a应用向左的浮动。而content_b不应用任何浮动。
Source Code to Run [www.52css.com]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"
/><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; float:left;
border:1px solid#000; margin:10px; background:#ccc;} #content_b
{width:200px;height:80px; border:1px solid #000; margin:10px;
background:#999;}</style> </head> <body>
<divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div>
<divid="content_b">52CSS.com 这是第二个DIV 不应用浮动</div>
</body></html>
[ 可先修改部分代码 再运行查看效果 ]
[ 可先修改部分代码 再运行查看效果 ]
我们看在IE6中的效果：
我们看在FF中的效果：
在IE中，对content_a应用向左的浮动后，content_a向左浮动，content_b在水平方向仅跟着它的后面。
在FF中，对content_a应用向左的浮动后，content_b在水平方向容器不可见，只留下了文字。这是由于未清除浮动所造成的现象，关于清除浮
动，可以参考这里：http://www.52css.com/article.asp?id=132
（overflow:auto;）这就是IE与FF对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。
我
们同时对这两个容器应用向左的浮动看看发生的现象。
Source Code to Run [www.52css.com]
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"
/><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; float:left;
border:1px solid#000; margin:10px; background:#ccc;} #content_b
{width:200px;height:80px; float:left; border:1px solid #000;
margin:10px;background:#999;} </style> </head> <body>
<divid="content_a">52CSS.com 这是第一个DIV 向左浮动</div>
<divid="content_b">52CSS.com 这是第二个DIV 向左浮动</div>
</body></html>
[ 可先修改部分代码 再运行查看效果 ]
[ 可先修改部分代码 再运行查看效果 ]
在IE中的效果如图：
在FF中的效果如图：
在IE与FF中，他们的效果基本取得了一致。在布局中，我们可应用这类IE与FF兼容的方法。
我们对content_b应用向左的浮动。而content_a不应用任何浮动。看看是何效果：
Source Code to Run [www.52css.com]
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"
/><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; border:1px
solid #000;margin:10px; background:#ccc;} #content_b {width:200px;
height:80px;float:left; border:1px solid #000; margin:10px;
background:#999;}</style> </head> <body>
<divid="content_a">52CSS.com 这是第一个DIV 不应用浮动</div>
<divid="content_b">52CSS.com 这是第二个DIV 向左浮动</div>
</body></html>
[ 可先修改部分代码 再运行查看效果 ]
[ 可先修改部分代码 再运行查看效果 ]
在IE中的效果如图：
在FF中的效果如图：
在IE与FF中均未有太大的变化。在IE中，应用浮动后的content_b却造成了一个双边距的BUY。汗一个先。关于IE的双边距BUY请参考这里：http://www.52css.com/article.asp?id=144
向左浮动会出现何种状态呢？在向右浮动后，最大的变化就是在HTML中，前面的元素在最右边，后面的元素跑到了最左边。
我
们对上面代码中的两个元素同时应用向右的浮动看看效果。
Source Code to Run [www.52css.com]
<!DOCTYPE
html PUBLIC "-//W3C//DTD XHTML1.0
Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml"> <head>
<metahttp-equiv="Content-Type" content="text/html; charset=gb2312"
/><title>52CSS</title> <style
type="text/css">#content_a {width:200px; height:80px; float:right;
border:1px solid#000; margin:10px; background:#ccc;} #content_b
{width:200px;height:80px; float:right; border:1px solid #000;
margin:10px;background:#999;} </style> </head> <body>
<divid="content_a">52CSS.com 这是第一个DIV 向右浮动</div>
<divid="content_b">52CSS.com 这是第二个DIV 向右浮动</div>
</body></html>
[ 可先修改部分代码 再运行查看效果 ]
[ 可先修改部分代码 再运行查看效果 ]
在IE中的效果如图：
在FF中的效果如图：
同时对两个元素应用向右的浮动基本保持了一致，但请注意方向性，第二个在左边，第一个在右边。
对于其它页面构成元素，浮动的原理基本是一样的，大家多动手测试，才能有更进一下的认识。学习CSS就是多动手，多写代码，必有收获！
分享到：
发表评论
-
15款基于浏览器扩展的WEB开发工具
2009-07-29 08:44 772WEB开发工具的使用已经 ... -
WEB 服务器调试利器 -- Tamper Data(转)
2009-07-29 08:53 746一. 简介 作为 Firefox 的插件， T ... -
图片和文字放一起，不能居中的解决方法
2009-07-29 14:47 951<td align="center" ... -
深入浅出URL编码
2009-08-11 19:58 641版权声明：如有转载请求，请注明出处： http://blog ... -
【CSS布局.2】绝对定位和相对定位
2009-08-20 15:51 599Absolute ，CSS 中的写法是：positio ... -
【CSS布局.1】盒子模型
2009-08-20 15:51 611例子： .box { width: 200px; ... -
【CSS布局.4】五种CSS布局类型
2009-08-20 15:52 640CSS 布局的五种类型概述 有五种基本布局定位类型可供选择: ... -
【CSS布局.3】列表样式定义法
2009-08-20 15:52 597CSS代码: .list{ margin: 0px 10 ... -
区别不同浏览器，CSS hack写法
2009-08-20 16:01 618区别IE6 与FF ： backgroun ... -
常用CSS缩写语法总结
2009-08-24 17:55 659使用缩写可以帮助减少你CSS文件的大小，更加容易阅读。css缩 ... -
CSS颜色代码大全
2009-08-25 15:55 864CSS颜色代码大全 FFFF ... -
CSS @import at规则
2009-09-02 10:40 675at规则 HTMLDog指南 > CSS高级指南 &g ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:05 686前言 如果你想尝试一 ... -
彻底弄懂CSS盒子模式之一
2009-09-02 17:06 626熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种 ... -
彻底弄懂CSS盒子模式之二
2009-09-02 17:07 610作者：唐国辉 实现原理动画演示：http://www ... -
彻底弄懂CSS盒子模式之三
2009-09-02 17:08 731一、下面请看float的精彩表演，有请。 大 ... -
彻底弄懂CSS盒子模式之五
2009-09-02 17:09 578在本人上一篇教程《彻 ... -
彻底弄懂CSS盒子模式之四
2009-09-02 17:09 673前言 在用CSS控制排版过程中，定位一直被人认为是一个难 ... -
CSS 盒模型
2009-09-02 17:11 597整理自：The CSS Box Model 中文：CSS 盒 ... -
DOM标准与IE的html元素事件模型区别
2009-09-23 13:35 698事件 HTML元素事件是 ...
相关推荐
DIVCSS布局：CSS浮动float属性详解.doc
CSS浮动float属性详解 在Web开发中，布局是非常重要的一方面，浮动float属性是CSS布局中非常关键的属性。通过对浮动float属性的理解和掌握，我们可以更好地实现网页的布局和排版。 Float浮动属性基本释义 float...
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性，允许页面元素浮动在其他元素旁边。Float 属性可以取四个值：Left、Right、None 和 Inherit。其中，Left 和 Right 分别浮动元素到左边和右边，...
标题中的“CSS布局详解浮动属性Float”指的是CSS布局中的一种重要技术——浮动（Float），这个属性主要用于创建复杂的网页布局，尤其是图文混排和多列布局。描述中提到的内容可能是关于浮动属性的历史来源，以及它...
- 浮动布局（Float Layout）：通过`float`属性让元素在容器内浮动，常用于创建多列布局。 - 定位布局（Positioning）：通过`position`属性（如`static`、`relative`、`absolute`、`fixed`）来精确控制元素的位置。...
**Div+CSS布局详解** Div+CSS布局是网页设计中常用的一种技术，它将内容（HTML元素）与表现（样式）分离，提高了网页的可维护性和可扩展性。Div是HTML中的一个容器元素，用于组织页面结构，而CSS（Cascading Style ...
在"CSS详解—DIV网页样式与布局"的压缩包中，你将找到更多关于CSS和DIV布局的详细示例和教程，帮助你进一步掌握这些核心概念和技术。通过实践和学习，你将能够熟练地运用CSS和DIV构建出美观、功能完善的网页。
**div+css布局详解** 在网页设计中，`div+css`布局是一种常见的技术，用于组织和控制网页元素的位置和样式。它通过HTML中的`<div>`元素作为容器，配合CSS（Cascading Style Sheets）来实现灵活、可维护的页面布局。...
### divcss布局实例知识点 #### 一、divcss布局简介 在网页设计中，`div+css`是一种非常常见的布局方式。它通过HTML中的`<div>`元素与CSS（层叠样式表）相结合来实现页面的布局效果。这种方式相较于传统的表格布局...
CSS浮动属性Float详解 CSS浮动属性Float是CSS中的一种定位方式，它可以使元素在网页流中浮动，周围的元素可以围绕它排列。浮动元素仍然是网页流的一部分，这与使用绝对定位的页面元素不同。绝对定位的页面元素被从...
《CSS+DIV布局网站实例详解》 在网页设计领域，CSS（Cascading Style Sheets）与HTML（Hypertext Markup Language）的结合使用是构建现代网站布局的基础。本实例主要探讨如何利用CSS+DIV技术来实现高效、灵活的网页...
**DIV+CSS布局详解** 在网页设计领域，`DIV+CSS`布局是一种高效且灵活的网页构造方式，它将内容（HTML元素）与样式（CSS）分离，使得页面结构清晰，易于维护。本资料包“DIV+CSS布局大全”旨在帮助你深入理解和掌握...
### div+css布局详解：构建清晰网页结构的艺术 在网页设计与开发领域，`div+css`布局方式因其灵活性、可维护性和响应性而成为现代前端开发中的主流选择。通过结合`div`元素与`css`样式表，开发者能够创建出既美观又...