1、浮动定义
float（浮动），会使元素向左或者向右移动，其周围的元素也会重新排列。
2、浮动用法
可选值： none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
float可以使块元素水平布局
3、浮动特点
1.浮动元素脱离文档流之后不会在占用文档流的位置，它下面的元素会立即向上移动
举例：
<head>
<style>
.box{background-color: red;
height: 200px;
width: 200px;}
.box1{background-color: yellow;
height: 400px;
width: 400px;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
正常情况下，黄色方块 是 在红色方块下面的下面
当我们为红色方块设置左浮动时， 黄色方块会向上移动
<head>
<style>
.box{background-color: red;
height: 200px;
width: 200px;
float: left;}
.box1{background-color: yellow;
height: 400px;
width: 400px;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
2.浮动的元素会移动到父元素的左侧或者右侧
<head>
<style>
.fu{width: 800px;
height: 800px;
border:1px solid blue;
margin: 0 auto;}
.box{background-color: red;
height: 200px;
width: 200px;
float: left;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float: right;}
</style>
</head>
<body>
<div class="fu" >
<div class="box"></div>
<div class="box1"></div>
</div>
3.浮动元素不会溢出父元素
4.浮动元素上面是一个没有浮动的块元素，则浮动元素无法上移
举例
红色方块不设置浮动
给黄色方块设置左浮动
<head>
<style>
.box{
background-color: red;
height: 200px;
width: 200px;}
.box1{
background-color: yellow;
height: 400px;
width: 400px;
float: left;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
红色方块不设置浮动
给黄色方块设置右浮动
<head>
<style>
.box{background-color: red;
height: 200px;
width: 200px;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float: right;}
</style>
</head>
<body>
<div class="box"></div>
<div class="box1"></div>
</body>
脱离文档流的特点（元素设置浮动从文档流中脱离以后，元素的一些特点也会发生改变）
块元素：
1.不会独占一行
2.块元素的宽高被内容撑开
行内元素：
行内元素脱离文档流会变成块元素，特点与块元素相同
总结：脱离文档流之后不区分块元素和行内元素
4、高度塌陷
在正常的文档流当中，父元素高度是被子元素撑开的
若子元素浮动，脱离文档流，会导致我们父元素高度丢失，我们叫高度塌陷
解决高度塌陷的方法：
1.清除浮动：clear
属性值：
none默认值 不清除浮动
left 清除左侧元素对当前元素的影响
我们可以在box父元素中，在box1（浮动盒子）后面加一个空盒子（box2）来清除浮动，解决高度塌陷
<head>
<style>
.box{border:1px solid red;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float:left;
.box2{clear:both}
</style>
</head>
<body>
<div class="box"><div class="box1"></div>
<div class="box2"></div>
</div>
</body>
这个方法不太推荐，毕竟加了一个无意义的标签，写一个还行，太多就有点泛滥了
2.给父元素设置固定高度（不建议使用，不够灵活）
3.将父元素添加属性overflow：hidden
缺点：有时候可能会和我们想得到的预期效果不一样
4.给父元素设置一个伪元素选择器，并设置常用的清除浮动的样式，然后after就会把盒子撑开
<head>
<style>
.box{border:1px solid red;}
.box1{background-color: yellow;
height: 400px;
width: 400px;
float:left;}
.box::after{
/* 添加一个内容 */
content:" ";
/* 将内容转换为块元素 */
display:block;
/* 清除两侧的浮动 */
clear:both;}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>