转自：http://www.jzxue.com/html/css/2007/6/5613D1926.html
首先我们了解到，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浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动靠左（float:left）和浮动靠右(float:right)。 float的作用：通过css定义float...
CSS 浮动属性 Float 详解 CSS 浮动属性 Float 是一种重要的定位属性，允许页面元素浮动在其他元素旁边。Float 属性可以取四个值：Left、Right、None 和 Inherit。其中，Left 和 Right 分别浮动元素到左边和右边，...
如何正确的理解CSS的float浮动属性.pdf
float浮动属性是CSS布局中非常关键的属性，通过对浮动float属性的理解和掌握，我们可以更好地实现网页的布局和排版。但是，我们也需要注意浮动float属性的缺点，例如浮动未清除的现象和浏览器兼容性问题。
浮动(float)属性是CSS布局中的一个关键特性，主要用于创建流式布局、多列布局以及解决元素定位问题。在传统表格布局中，我们依赖表格的对齐方式来组织内容，但在Web标准开发中，浮动属性成为了实现灵活布局的核心...
在网页设计中，浮动属性`float`是CSS（层叠样式表）中一个非常重要的概念，主要用于布局控制。本笔记将深入探讨`float`的原理、应用及其源代码实例。 一、`float`属性概述 `float`属性最初被引入用于创建图文混排的...
CSS深入理解之float浮动视频教程.txt 前端必备技能，助你快速掌握
标题中的“CSS布局详解浮动属性Float”指的是CSS布局中的一项重要技术——浮动（Float），它在网页设计中扮演着关键角色。描述虽然未提供具体内容，但可以推测文章将深入探讨浮动属性及其在创建网页布局中的应用。 ...
【CSS浮动(float属性)详解】 一、浮动的概念 浮动（float）是CSS布局中的一个重要概念，它使得元素能够脱离正常文档流，向左或向右...正确理解和使用浮动，以及掌握解决浮动问题的策略，是每个前端开发者必备的技能。
CSS浮动属性Float详解 CSS浮动属性Float是CSS中的一种定位方式，它可以使元素在网页流中浮动，周围的元素可以围绕它排列。浮动元素仍然是网页流的一部分，这与使用绝对定位的页面元素不同。绝对定位的页面元素被从...
- 当内联元素与浮动元素相邻时，由于内联元素的特性，可能会导致布局混乱，因此通常建议将浮动属性应用于块级元素。 - 清除浮动（clear）是与浮动布局相关的另一个重要概念，它用于防止元素受到前面浮动元素的影响。...
标题中的“CSS布局详解浮动属性Float”指的是CSS布局中的一种重要技术——浮动（Float），这个属性主要用于创建复杂的网页布局，尤其是图文混排和多列布局。描述中提到的内容可能是关于浮动属性的历史来源，以及它...
我并没有对CSS所有的属性都有很清晰的情感化的理解，我用CSS才几年啊，我要学的还有很多。但是，对于CSS中常用的float属性，我还是有些感觉的，这也是本文的主旨所在。本文将会从我的一些感性的认识的角度讲解CSS ...
CSS中的`float`属性是一个关键的布局工具，它允许元素脱离标准文档流并影响周围内容的布局。本文将深入探讨`float`属性的特性、应用场景以及它在解决布局问题中的作用。 一、`float`的特性 1. **文字围绕图片**：`...
具体详细的阐述了css浮动如何解决和浮动产生的原因。