`

DIV CSS布局：CSS浮动float属性详解

 
阅读更多

在传统的表格布局中，我们对表格应该对齐方式对实现了对布局的应用，而应用Web标准构建网页以后，float浮动属性是布局中非 常重要的属性，我们常常通过对div元素应用float浮动来进行布局，不但对整个版式进行规划，也可以对一些基本元素如导航等进行排列。

我们来看看float属性基本释义：
该属性的值指出了对象是否及如何浮动。当该属性不等于none引起对象浮动时，对象将被视作块对象(block-level)，即display属性等于 block。也就是说，浮动对象的display特性将被忽略。

float属性的参数：
none：对象不浮动
left：对象浮在左边
right：对象浮在右边

下面我们通过一些测试来了解可能出现的一些情况，如果float取值为none则不会发生任何浮动，块元素独占一行，紧随其后的块元素将在新行中显示，如 下图：


我们看下面的运行效果：

div css xhtml xml Source Code to Run 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不应用任何浮动。

div css xhtml xml Source Code to Run 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对此种情况的不同解决，我们在实际布局中，应该避免这样的情况发生。

我 们同时对这两个容器应用向左的浮动看看发生的现象。

div css xhtml xml Source Code to Run 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不应用任何浮动。看看是何效果：

div css xhtml xml Source Code to Run 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中，前面的元素在最右边，后面的元素跑到了最左边。

我 们对上面代码中的两个元素同时应用向右的浮动看看效果。

div css xhtml xml Source Code to Run 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就是多动手，多写代码，必有收获！

分享到：
| 明明白白讲解CSS浮动属性float的故事
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    DIVCSS布局：CSS浮动float属性详解.doc

    DIVCSS布局：CSS浮动float属性详解

    DIV+CSS布局：CSS浮动float属性详解

    DIV+CSS布局：CSS浮动float属性详解 不解释

    DIV+CSS布局：CSS浮动float属性详解[归纳].pdf

    DIV+CSS布局：CSS浮动float属性详解[归纳].pdf

    css float浮动属性的深入研究及详解拓展(一)

    我并没有对CSS所有的属性都有很清晰的情感化的理解，我用CSS才几年啊，我要学的...但是，对于CSS中常用的float属性，我还是有些感觉的，这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS float属性

    CSS网站布局实录 （第二版）PDF版

    文本、图像、超链接、列表、菜单、网站导航、表单、数据表格、浮动布局等CSS布局控制。),智能、创造型布局思维(智慧、完美视觉艺术效果之CSS布局技巧、CSS Hack实践战略),Web技术团队倾情奉献(来自CSS布局与Web标准...

    详解css清除浮动float的七种常用方法总结和兼容性处理

    知道浮动和为什么要清除浮动之后我们可以开始学习如何清除浮动了，这时候我们就需要用到清除浮动的属性clear, clear:left | right | both | none | inherit：元素的某个方向上不能有浮动元素 clear:both：在左右...

    详解css使既有浮动又有左右margin的多个元素两端对其

    如上图中红色的9个div它们中间有间距，而最左边和最右边是没有间距的，这种布局如果使用css3的flex来实现是非常简单的，而如果要使用float布局就需要一些特殊的技巧了。 实现原理 红色的9个div左浮动，左右margin为...

    CSS清除浮动的方法详解

    在浮动元素后使用一个空元素如&lt;div class=clear&gt;&lt;/div&gt;，并在CSS中赋予.clear{clear:both;}属性即可清理浮动。亦可使用或来进行清理。 CSS Code复制内容到剪贴板 .news { background-color: gray; border: ...

    常用的DIV+CSS的基本框架结构但不推荐都放一个div里

    DIV+CSS基本框架结构详解 在 Web 开发中，DIV+CSS 是一种常见的前端开发技术，用于构建网站的基本框架结构。今天，我们将详细介绍 DIV+CSS 的基本框架结构，并探讨为什么不推荐将所有内容都放入一个 DIV 元素中。 ...

    html/css中float浮动的用法实例详解

    1、当元素的float属性取值为left或right时，元素属于浮动定位; 2、若剩余空间无法放下浮动的盒子，则该盒子向下移动，直到具备足够的空间能容纳盒子，然后再向左或向右移动； 3、浮动盒子的顶边不得高于上一个盒子

    css入门笔记

    1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法： 样式声明：用样式属性和值组成（属性:值;） ...

    css清除浮动clearfix:after的用法详解（附完整代码）

    网上常用的完整代码： CSS Code复制内容到剪贴板 .clearfix:before, .clearfix:after { content:; display:table;...如果外部有一个div容器，其内部div容器设置了float样式，则外部的容器div

    详解css中的float

    两个相邻的浮动元素，当第一个浮动元素（不论是左浮动还是右浮动）的宽度为100%时，第二个浮动元素会被挤到下面，通过添加负margin-right值（绝对值最少等于它自身的宽度），可以使它回到第一行。 在书写html代码时...

    清除浮动的几种方法详解

    &lt;div&gt; ...css .box-left,.box-right{ width:200px; height:200px; float: left; background: red; border:1px solid #333; } 第一种方法：.box{clear:box} 第二种方法：.box{overflow:hidde

Magicbox
Global site tag (gtag.js) - Google Analytics