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>
