使用浮动属性设置浮动元素的CSS教程
浮动框架可移动到左侧或右侧，直到框架的外边缘与包含框架或其它浮动框架的框架相匹配。由于浮动框不在文档的普通流中，所以文档的普通流中的块表现为浮动框不存在。
浮动效果显示
基本设置
通常将3个div颜色块添加到Web页面中：
HTML代码：
xml代码将内容复制到剪贴板。
DIV1
格式
div3
只需设置一些大小和颜色：
CSS代码：
CSS代码将内容复制到剪贴板。
{。DIV1
宽度：100px；
身高：100px；
背景颜色：青色；
}
{格式。
宽度：100px；
身高：100px；
背景颜色：天蓝色；
}
{。div3
宽度：100px；
身高：100px；
背景颜色：绿色；
}
结果如下：
一般情况下，从上到下依次订购3个div。
下面，让我们使用下一个浮点属性并设置值右
添加浮动属性到DIV1标签
CSS代码将内容复制到剪贴板。
{。DIV1
宽度：100px；
身高：100px；
背景颜色：青色；
浮：错误；
}
结果如下：
我们会发现DIV1运行到屏幕的右边，这是让它浮到正确的性能。
同时，设置浮点：所有3个div的左边
CSS代码将内容复制到剪贴板。
{。DIV1
宽度：100px；
身高：100px；
背景颜色：青色；
浮点数：左；
}
{格式。
宽度：100px；
身高：100px；
背景颜色：天蓝色；
浮点数：左；
}
{。div3
宽度：100px；
身高：100px；
背景颜色：绿色；
浮点数：左；
}
结果如下：
当我们看到3个div被设置为浮动时，可以实现水平布局。
修改CSS代码（DIV1和DIV2的高度宽度），如下：
CSS代码将内容复制到剪贴板。
{。DIV1
宽度：100px；
身高：130px；
背景颜色：青色；
浮点数：左；
}
{格式。
宽度：300px；
身高：100px；
背景颜色：天蓝色；
浮点数：左；
}
{。div3
宽度：100px；
身高：100px；
背景颜色：绿色；
浮点数：左；
}
效果显示：
我们会发现当DIV2是足够宽和div3不放置在一条线上，div3将从第二线开始自动布局。但由于该DIV1高一点，会从后面的div3 DIV1排列，不是从一开始。
使用溢出移除浮动
Sample：
CSS代码将内容复制到剪贴板。
溢出清除浮点数{溢出：隐藏；}
也许
CSS代码将内容复制到剪贴板。
溢出清除浮点数{溢出：自动；}
当溢流式的价值不visilbe，它实际上是块格式化的CSS 2.1规范定义的上下文中创建。创建元素，其内部元件的位置重新计算得到的精确高度。所以父容器还包含浮动元素的高度。术语太晦涩。在CSS 3草案中，它被转换为名词根流。顾名思义，它创建了一个新的根布局流程，独立于外部因素。事实上，这一特点是早期即haslayout特性非常相似
注意兼容性问题：
块格式化上下文的概念是在CSS 2.1规范提出的。因此，IE6 / 7是不支持的，因为以前版本的IE只有充分实现CSS 1规范，和CSS 2规范的一部分。在IE 7中，当溢出值是不可见的，这haslayout功能可以引起的。这也使得IE 7还允许容器包含浮动元素。