我们时常能够看到css样式表中使用了float:left，float:right那么何时使用float？为什么需要使用float？
首先网站中的HTML标签可以整体分为两类，其中包括行元素和块元素。其最明显的区别是块元素可以独立成行（每个块元素单独占一行）、并且块元素可设置大小、如果不给块元素设计宽度，那么块元素宽度等于父级宽度（宽度的自适应），常用块元素包括div,h1-6,p,ul,li,table,tr等。
那么我们来举个例子：设置两个div(块元素，独立成行)，利用css设置其背景颜色和长宽，我们会发现两个div单独占一行。
因而float的第一个作用：让块元素转变为行元素，实现两个块元素并排显示。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 300px;
height: 300px;
background-color: aqua;
float: right;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
此时，我们在下面随便加一个div，设置背景颜色和宽高，我们会发现下面的div跑到了上面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.left{
width: 300px;
height: 300px;
background-color: pink;
float: left;
}
.right{
width: 300px;
height: 300px;
background-color: aqua;
float: left;
}
.bottom{
width: 700px;
height: 700px;
background-color: red;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="bottom"></div>
</body>
</html>
因而我们发现了第二个问题：文档流中内容，添加浮动后直接脱离了文档流，简而言之，就是添加浮动的元素不占位置。元素不占位置其兄弟元素找不到对应元素，为了解决这个问题，我们可以给其添加clear: both;清除浮动对他的影响。即在.bottom{}内部添加clear: both;
浮动元素对于其父级元素来讲也不占位置，给父级元素添加overflow: hidden，取消子集元素对其浮动的影响，例如li填加浮动后ul便没有了高度，可以给ul添加上述css样式。其中overflow: hidden也可以用于轮播图中 ，使得超出的部分内容隐藏起来。
要注意，如果发现使用浮动没有并排，只有一个原因，那就是其宽度超出浏览器宽度，不足以让其浮动。