CSS中的float属性是一个频繁用到的属性，对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。本文将从最基本的知识开始说起，谈谈关于浮动的应用，出现的问题和解决方案。

基础知识

float，顾名思义就是浮动，设置了float属性的元素会根据属性值向左或向右浮动，我们称设置了float属性的元素为浮动元素。
浮动元素会从普通文档流中脱离，但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。举例说明如下：
Html代码：

CSS代码：

效果图

由效果图可以看出，span元素周围的文字会围绕着span元素，而设置了float属性的span元素变成了一个块级元素的感觉，可以设置width和height属性。这是设置了float属性后的效果，关于float的详细细节，我们接下来详细讲解。

float的详细细节

在说明float带来的详细细节之前，我们首先要了解一个概念。
包含块：浮动元素的包含块就是离浮动元素最近的块级祖先元素，前面叙述的例子中，div.box就是span元素的包含块。

了解完包含块的概念之后，首先要说明的浮动元素的第一个特性：不管一个元素是行内元素还是块级元素，如果被设置了浮动，那浮动元素会生成一个块级框，可以设置它的width和height，因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

浮动元素的展示在不同情况下会有不同的规则，下面我们来一一说明这些规则。
1.浮动元素在浮动的时候，其margin不会超过包含块的padding
这一点很简单，浮动元素的浮动位置不能超过包含块的内边界
HTML代码

CSS代码

效果图

这个例子中，box的padding是10px，浮动元素的margin是10px，合起来为20px，即浮动元素不会超过包含块的padding。
PS：如果想要元素超出，可以设置margin属性

2.如果有多个浮动元素，后面的浮动元素的margin不会超过前面浮动元素的margin
简单说就是如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。
修改前面例子中的HTML代码如下：

效果图如下：

如图所示，浮动元素会一个一个排序下来而不会发生重叠现象。

3.如果两个元素一个向左浮动，一个向右浮动，左浮动元素的marginRight不会和右浮动元素的marginLeft相邻。
什么意思呢，我们要分两种情况来看。
（1）包含块的宽度大于两个浮动元素的宽度总和，举例如下：
HTML代码：

CSS代码