CSS网页布局的原理，就是按照HTML代码中对象声明的顺序，以流布局的方式来显示它，而流布局就不得不说到float浮动技术，在HTML中的所有对象，默认分为两种：块元素(block element)、内联元素(inline element)，虽然也存在着可变元素，但只是随上下文关系确定该元素是块元素或者内联元素。
其实CSS的float属性，作用就是改变块元素(block element)对象的默认显示方式。block对象设置了float属性之后，它将不再独自占据一行。可以浮动到左侧或右侧。
例如：
<!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>www.52css.com</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.52css.ocm]</div>
<div class="leftfloat">div left float:left</div>
<div class="right">div right [www.52css.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)，自然的处于同一行。
分享到：
相关推荐
CSSfloat属性的正确使用可能会变成一项艰巨的任务，它涉及内容过多，浏览器兼容性问题也很多，导致开发者很头疼,本文包含的实例应用属性float说明性例子,感兴趣的朋友可以参考下，希望可以帮助到你
CSS clear属性相信大家都有所耳闻吧，下面举例说明下clear属性到底给float（clear常常和float结合使用）带来哪些影响
CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往...
相信很多人都有这样的问题，在页面布局中float和position:absolute哪个更好用呢？既然是布局，就用float好，这个我比较常用。这个浮动是可以清除的，一般不会影响整体布局。而position，定位，是不受约束的，这个...
#box1,#box2{ float:left; width:200px; height:300px; color:#ffffff; font-size:36px; text-align:center; line-height:300px;}#box1{ border:solid 5px #ff0099; background-image:url(‘bg2.jpg’);}#...
git clone https://github.com/edWAR6/CSS-Positioning-Float-Workshop.git如果要在个人资料库中上载研讨会。 在您的个人资料中创建一个存储库，然后： git remote set-url origin ...
利用css的clear属性实现广告文字环绕效果_网页代码站(www.webdm.cn) <div style="float:left;"> <div style="float:left;height:100px;width:1px;"><!--一个宽为1px的空白层，利用该层的高度控制广告层上下的位置。...
刚才看到一篇好的文章介绍js调用css属性，( ^_^ )不错嘛！免的自己忘记，总结一下1、对于没有中划线的css属性一般直接使用style.属性名即可。 如：obj.style.margin，obj.style.width，obj....因为float是Javascrip
2、.after-clear-float :after{content:; display:block; clear:both;}利用伪类添加新元素，原理同上，所以只适用于父容器最后一级子元素是浮动的，即浮动元素后面没有非浮动元素把它和父容器隔开。只是IE6/7不...
转载请将此说明全部发出,因为可能会有新手不会用,并且该说明会有更详细的扩展说明. 为了国内javascript水平的共同进步,让我们一起努力！ 此版为3天完成,今后可能会有升级，请关注我的blog. -----------------------...
课程说明 级联样式表（CSS）是一种样式表语言，可让您控制网页的外观。 在本动手课程中，Christina Truong演示了构成CSS基础的概念，并解释了调整现有CSS和编写自己CSS所需的知识。 克里斯蒂娜（Christina）解释了...
说明： 设置对象内的第一个字符的样式。 此伪对象仅作用于块对象。内联要素要使用该属性，必须先设定对象的 height 或 width 属性，或者设定 position 属性为 absolute ，或者设定 display 属性为 block 。在此伪...
二、插件说明 1、提供后台进行相关配色处理，并且可以预览 2、可以设置插件插入代码的位置（文章顶部/底部） 3、安装插件时会在当前主题样式的css中增加 .XianguoDigg{float:right;padding:10px;} ...
CSS＋DIV是网站标准（或称“WEB标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而是采用css div的方式实现各种定位。...
CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能...
前端开发 它涉及网站的视觉方面 ...它定义了网站的结构 ...：处理文字的基本标签 ...：涵盖几乎所有类型的链接 ...：包括与表单相关的事物的一些综合示例 ... ：CSS中float和clear的非常漂亮的用法 ：CSS中Display