首先我们了解到，CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。关于块元素和内联元素可以参考这里。
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧，关于float属性的详细说明可以参考这里。
需要引起你重视的是，float属性不是你所想象的那么简单，不是通过这一篇文字的说明，就能让你完全搞明白它的工作原理的，我们需要在实践中不断的总结经验，应对所出现的问题。我们通过下面的这个小例子，来说明它的基本工作情况。
我们看下面的CSS代码：
.left{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
}
.leftfloat{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
}
left和right为不作任何浮动的类。leftfloat向左浮动的类。
我们再看看xhtml代码：
<div class="left">div left float:none</div>
<div class="right">div right [www.jzxue.com]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.jzxue.com]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>
我们看运行效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正确理解css float属性--建站学</title>
<style type="text/css">
<!-- .left{
background-color:#cccccc;
border:2px solid #333333;
width:200px; height:100px;
}
.leftfloat
{
background-color:#cccccc;
border:2px solid #333333;
width:200px;
height:100px;
float:left;
}
.right
{
background-color:#cccccc;
border:2px solid #333333;
height:100px;
} -->
</style>
</head>
<body>
<div class="left">div left float:none</div>
<div class="right">div right [www.jzxue.ocm]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.jzxue.ocm]</div>
<span class="left">span left float:none</span>
<span class="right">span right</span>
</body>
</html>
结果:
我们看(1)和(2)：容器(1)没有任何浮动，占据了一整行，将(2)挤到了下面一行。而且(2)也占据了一整行的位置。
我们看(3)和(4)：容器(3)声明了左浮动，容器(4)浮动到了它的右侧。实现了这两个容器处于同一行的情况。
我们看(5)和(6)：容器(5)和(6)是span元素，也就是内联元素(inline element)，自然的处于同一行。
分享到：
相关推荐
如何正确的理解CSS的float浮动属性.pdf
CSS浮动属性Float详解 什么是CSS Float？
DIV+CSS布局：CSS浮动float属性详解 不解释
接上回…css float浮动属性的深入研究及详解拓展(一) 五、浮动的非本职工作 浮动的本职工作是让匿名inline boxes性质的文字环绕图片显示，而其他所有用浮动实现的效果都不是浮动应该做的事情，我称之为“非本职工作...
DIV+CSS布局：CSS浮动float属性详解[归纳].pdf
DIVCSS布局：CSS浮动float属性详解
CSS深入理解之float浮动视频教程.txt 前端必备技能，助你快速掌握
笔记：浮动属性float的应用的全部源代码。
我并没有对CSS所有的属性都有很清晰的情感化的理解，我用CSS才几年啊，我要学的还有很多。但是，对于CSS中常用的float属性，我还是有些感觉的，这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS ...
CSS浮动属性Float详解[收集].pdf
给元素本身添加float属性 float值： left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现的位置。 inherit 规定应该从父元素继承 float 属性的值...
具体详细的阐述了css浮动如何解决和浮动产生的原因。
本篇文章主要介绍了css中Float属性， 顾名思义,就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
Float（浮动）概念也许是CSS中最让人迷惑的一个概念吧。Float经常被错误理解，而且因为将上下文元素全部浮动导致的可读性、可用性问题备受责难。然而，这些问题的根源并不在于理论本身，而是开发人员以及浏览器对...
本文针对CSS浮动float、定位position进行学习理解，通过实例帮助大家掌握CSS浮动float、定位position技巧，感兴趣的小伙伴们可以参考一下
css实例教程 理解Float的含义.