一、浮动的简介
通过 float 属性设置元素的浮动。通过浮动，可以使一个元素向其父元素的左侧或右侧移动；元素设置浮动以后，水平布局的等式不需要强制成立。元素设置浮动以后，会完全从文档流中脱离，不在占用文档流中的位置，所以元素下面的还在文档流中的元素会自动向上移动。
<!DOCTYPE html>
<html>
<head>
<title>浮动</title>
<meta charset="utf-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: #bfa;
/*
float 设置元素的浮动
可选值：
- none：默认值，元素不浮动
- left：元素向左浮动
- right：元素向右浮动
*/
float: left;
}
.box2{
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
.box3{
width: 400px;
height: 400px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
二、浮动的特点
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会改变：
- 块元素
- 块元素不在独占一行
- 脱离文档流之后，宽度和高度默认都被内容撑开
- 行内元素
- 行内元素脱离文档流之后会变成块元素，特点和块元素一样
浮动的特点：
- 浮动元素会完全脱离文档流，不再占用文档流中的位置
- 设置浮动以后元素会向父元素的左侧或者右侧移动
- 浮动元素默认不会从父元素中移出
- 浮动元素向左或者向右移动时，不会超过它前边的其他浮动元素
- 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高
- 浮动元素不会盖住文字，文字会自动环绕再浮动元素的周围
<!DOCTYPE html>
<html>
<head>
<title>浮动</title>
<meta charset="utf-8">
<style>
.box1{
background-color: #bfa;
float: left;
}
.box2{
background-color: orange;
}
.s1{
width: 100px;
height: 100px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="box1">hello</div>
<div class="box2">world</div>
<span class="s1">我是一个span元素</span>
<span class="s2">我也是一个span元素</span>
</body>
</html>
标签：浮动,14,color,元素,流中,文档,background From： https://www.cnblogs.com/nanoha/p/16988274.html通过浮动可以让页面中的元素水平排列，从而制定一些水平方向的布局；
脱离文档流之后，不需要再区分块元素与行内元素了；