CSS中的float属性是一个常用的属性，我们常把float属性用来定位。设置了float属性的元素称为浮动元素，浮动元素会根据设置的属性值向左或向右浮动，从普通文档流中脱离。但浮动元素影响的不仅是自己，它会影响周围的元素对齐进行环绕。对于初学者来说，如果没有理解好浮动的意义和表现出来的特性，在使用的使用很容易陷入困惑，云里雾里，搞不清楚状态。本文将从基本的知识开始说起，谈谈关于浮动的应用，出现的问题和解决方案。

float 属性定义元素在哪个方向浮动。它有四个属性值，left：元素向左浮动，right：元素向右浮动，none：默认值，元素不浮动，inherit：从父元素继承 float 属性的值。

浮动想学好，一定要知道它的几个性质。

1）浮动的元素会脱离标准文档流

给元素的float属性赋值后，就会脱离文档流，进行左右浮动，紧贴着父元素的左右边框。而此浮动元素在文档流空出的位置，由后续的(非浮动)元素填充上去：块级元素直接填充上去，若跟浮动元素的范围发生重叠，浮动元素覆盖块级元素。内联元素：有空隙就插入。

结论：

当前元素(设置float：left属性) 下一个紧邻元素分类(不含float)

块级元素(a)

块级元素(b) b会填充a遗留下来的空间，a会和b发生重叠，a的图层在上面。

内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。

内联元素(a)

块级元素(b) b不会跟随a的移动。

内联元素(b) b会紧跟在a的后面。并根据自身内联元素的特点，是否换行。

2）浮动的元素可以设置宽高

一旦一个元素浮动了，那么，它就能够设置宽高。无论它原来是块级元素还是行内元素。因此float常常用于制作横向配列的菜单，可以设置大小并且横向排列。

3）浮动元素的展示在不同情况下会有不同的规则

a. 浮动元素的浮动位置不能超过其父元素的内边界。且其margin不会超过包含块的padding。

b. 如果有多个浮动元素，后面的浮动元素的margin不会超过前面浮动元素的margin。简单说就是如果有多个浮动元素，浮动元素会按顺序排下来而不会发生重叠的现象。

c. 浮动元素顶端不会超过包含块的内边界底端，如果有多个浮动元素，下一个浮动元素的顶端不会超过上一个浮动元素的底端。

这条规则简单说就是如果有多个浮动元素，后面的元素高度不会超过前面的元素，并且不会超过包含块。

d. 如果有非浮动元素和浮动元素同时存在，并且非浮动元素在前，则浮动元素不会不会高于非浮动元素。

e. 在满足其他规则下，浮动元素会尽量向顶端对齐、向左或向右对齐。

总结：以上就是我们float属性使用时要遵守的几个规则，float属性是一个频繁用到的属性，要用好它就要理解它的特性，否则容易云里雾里搞不清楚状况。