一、什么是浮动？
按照我的理解：浮动是CSS中让块元素水平排列的属性。
首先浮动是CSS中的一个属性，所有主流浏览器都支持float（包括IE），其次它的作用是让块元素水平排列，为什么特指块元素呢？因为内联元素本来就是水平排列的
二、浮动的属性值：
1、left ： 元素左浮动
2、right ：元素右浮动
3、inherit ： 继承父类的float属性值
4、none ： 不浮动（默认值）
！注意：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 “inherit”。
是不支持噢~~~
三、浮动的用法：
实例准备，我们将在下面这段代码进行浮动的演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浮动</title>
<style>
div{
height: 100px;
width: 100px;
}
.box1{
background: red;
}
.box2{
background: green;
}
.box3{
background: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
运行效果图：
效果分析：
页面中有三个div，宽高相等，颜色不一样；div为块级元素，所有默认占据一整行，现在我们要通过float使得三个div位于同一行。
1、float:left （左浮动）
div{
height: 100px;
width: 100px;
float: left;
}
我们给所有的div都添加上了float:left，达到了所有div位于同一行的效果，同理我们可以使用float:right使得元素位于同一行，但是靠右排列
2、float:right （右浮动）
div{
height: 100px;
width: 100px;
float: right;
}
使用右浮动后我们观察一下div的顺序，可以发现：
根据div的先后顺序，左浮动时，div从左到右排列；右浮动时，div从右到左排列
因为左浮动和右浮动元素排列顺序不一样，所有有时候我们需要特别注意一下：比如网页导航栏
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航</title>
<style>
ul li{
float: left;
list-style: none;
margin: 0 20px;
}
</style>
</head>
<body>
<ul>
<li>首页</li>
<li>资讯</li>
<li>产品中心</li>
<li>关于我们</li>
<li>反馈</li>
</ul>
</body>
</html>
我们通常使用ul li来制作导航栏，那么想要使得li水平排列，我们为每个li添加了浮动，效果如下：
但是我们发现，一般导航栏都是左边放logo，右边放导航的，但是这里我们不能直接使用右浮动，因为这样导航的顺序就变成不是我们想要的了
要实现常见导航栏的熊爱国，我们可以这样来实现：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>导航</title>
<style>
html,body{
margin: 0 100px;
padding: 0;
}
.logo{
height: 100px;
width: 200px;
background: red;
float: left;
}
ul{
line-height: 100px;
float: right;
}
ul li{
float: left;
list-style: none;
margin: 0 20px;
}
</style>
</head>
<body>
<div class="logo"></div>
<ul>
<li>首页</li>
<li>资讯</li>
<li>产品中心</li>
<li>关于我们</li>
<li>反馈</li>
</ul>
</body>
</html>
分析：
我们让li在ul中仍然是左浮动，保证导航栏的顺序；
然后让ul整体右浮动，而logo左浮动，这样就实现了简单的导航栏、
（当然，这是简单的实例，真正的导航栏还需要进很多步美化）
运行效果图：
3、float : none
这个是浮动的默认值，即为不浮动，用得比较少，一般在你需要覆盖别人的样式时可能会用到。
4、float：inherit
这个更少用，因为所有IE都不支持这个属性值，基本是不能使用的；
不过我没有测试过，是W3C说的~
四、浮动带来的后果：
浮动除了让块元素水平排列之后，还有造成我们元素的一些变化，我们也要清楚地知道这些变化：
1、浮动改变了元素的宽度
在没有添加浮动的时候，如果没有指定div的宽度，div的宽度将会占满一整行
那么如果没有指定宽度的情况下，添加浮动会怎么样呢？
结果就是浮动的div宽度为0了
我们可以在div中填充一些文字，然后为div添加浮动
<div class="box1">111</div>
<div class="box2">222</div>
<div class="box3">333</div>
我们再看效果：
结论：当元素天添加浮动属性后，宽高如果不指定，则为内容撑开的宽高。
2、脱离文档流
这是个很重要的知识点！！
脱离文档流这个概念我也不知道怎么解释，大概意思就是这个元素已经不是这个HTML中的一部分了，或者可以理解为不占据HTML中的位置了。
可以简单看一下案例：
<style>
div{
height: 100px;
width: 100px;
color: #fff;
}
.box1{
background: red;
float: left;
}
.box2{
height: 200px;
width: 200px;
background: green;
}
.box3{
background: blue;
}
</style>
首先我们只给div1添加浮动，另外两个不添加；
为了展示效果，给div2增加了宽高，我们可以看到这个效果：
这个例子可以很清晰的理解脱离文档流的意思:
div1脱离了文档流，则不占据HTML中的位置了，div2补充到div1的位置，但是div1仍看得见，所以div1把div2的一部分遮挡住了。
更气的是：div2的位置已经不受div1的影响了，但是div2的内容（222）还是会受到div1的影响。
为了解决float带来的位置问题，我们可以运用clear属性来清除浮动（第五节讲到）。
3、内联元素添加浮动后，拥有块级元素的特性
块级元素添加了浮动后，有了 display: inline-block ; 的特性，比如：不占据一行、宽高根据内容变化、可以定义宽高等。
而内联元素同理，也有了 display: inline-block; 的特性，比如可以定义宽高：
<style>
span{
height: 100px;
width: 300px;
margin: 0 10px;
}
</style>
......
<body>
<span>111</span>
<span>222</span>
<span>333</span>
</body>
现在页面中有一个内联span标签，在不添加浮动的时候，定义宽高无效，如下：
而添加了浮动之后，span的宽高生效了
<style>
span{
height: 100px;
width: 300px;
margin: 0 10px;
float:left;
}
</style>
值得一提的是：元素除了浮动外，并没有添加 display: inline-block;
也就是说，这种特性是float自带的，而不是通过修改了元素样式得来的。
五、清除浮动 （clear）
清除浮动也是一个CSS属性，用作清除浮动。
注意：初学者容易认为清除浮动是清除自身的浮动，而错误的使用了clear属性， 比如：
.div1{
height: 100px;
width: 100px;
background: red;
float: left;
clear: both;
}
.div2{
height: 200px;
width: 200px;
background: green;
}
这种用法和理解是错误的（给div设置float和clear），得到的结果仍是浮动：
清除浮动应该理解为 ： 清除该元素周围的浮动，而不是自身浮动，如果想清除div1浮动不影响div2，那么clear应该添加给div2
.div1{
height: 100px;
width: 100px;
background: red;
float: leftl;
}
.div2{
height: 200px;
width: 200px;
background: green;
clear: both;
}
表示div2周围不能存在浮动的元素，所以div2不会和div1并列。
！！注意：清除浮动只是让该元素不和浮动元素一起排列，但是它不会影响div1浮动
我们可以检查一下页面：
div2不浮动，默认占满一整行，div1浮动了，不再占满整行，尽管div2设置清除浮动，但不会影响div1浮动。
就算给div1设置清除浮动，也不会把div1从浮动变为不浮动：
.div1{
height: 100px;
width: 100px;
background: red;
float: left;
clear: both;
}
以上就是我对浮动的总结和认识，其中很多是我的个人总结，并不一定正确，而且描述的可能也未必恰当，毕竟我也是一个 新手，希望多多见谅。