什么是浮动
浮动是元素在页面中的一种定位方式，在css中用float表示，它有两个值为：left、right，这个属性产生的原本不是用来做布局的，而是用来做文字环绕的，但是后来人们发现做布局也不错，因此将其用来做布局，甚至忘记用它来做文字环绕。
浮动的效果
1、浮动定位的元素会被排除在文档流之外——脱离文档流（不占据页面空间），其余的元素要上前补位
例一： 当前面的元素设置为float:left后，该元素脱离了整个文档流，导致后面元素上前补位
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.floatDiv{
height: 100px;
width: 100px;
background: red;
float: left;
}
.nextDiv{
width: 150px;
height: 150px;
background: green;
}
</style>
</head>
<body>
<div class="floatDiv"></div>
<div class="nextDiv"></div>
</body>
</html>
页面显示效果
2、浮动元素会停靠在父元素的左边或者右边，或者停靠在其他已浮动元素的边缘上（元素只能在当前所在的行进行浮动）
例二: 子元素childDiv设置左浮动后它停靠在父元素的左边，nextDiv2设置了左浮动后，它停靠在已设置浮动的nextDiv1的边缘上
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.floatDiv{
height: 150px;
width: 150px;
background: red;
}
.childDiv{
width: 100px;
height: 100px;
background: green;
float: left;
}
.nextDiv1{
width: 100px;
height: 100px;
background: blue;
float: left;
}
.nextDiv2{
width: 100px;
height: 100px;
background: red;
float: left;
}
</style>
</head>
<body>
<div class="floatDiv">
floatDiv
<div class="childDiv">childDiv</div>
</div>
<hr style="margin:10px 0px;">
<div class="nextDiv1">nextDiv1</div>
<div class="nextDiv2">nextDiv2</div>
</body>
</html>
浏览器显示效果
3、浮动元素依然位于父元素之内（如例二所示）
4、使用浮动可以是多个块级元素在一行内显示
例三：设置li元素浮动，可以将li排成一行
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
overflow: hidden;
}
ul>li{
display: inline;
width: 100px;
height: 100px;
background: #fff;
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
float: left;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
transition:1s all;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>
浏览器显示效果
5、文本、行内元素、行内块级元素采用环绕的方式来浮动，是不会被浮动元素压的，会巧妙的避开浮动元素
例四：当图片在被浮动时，其他的内容会尽可能尝试围绕它出现，如果我们改变容器的大小或者将浏览器窗口变窄，文本只是简单的自我重排而不会碰触到图片。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
width: 400px;
}
img{
float: left;
}
</style>
</head>
<body>
<img src="./fselect.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim, quibusdam, veniam aspernatur est ratione eos maiores iste incidunt corrupti tempora ipsa error totam rerum. Cupiditate distinctio quae possimus. Totam, aut.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatum, animi illum dolores officiis ducimus aut quis id velit ipsa fuga excepturi accusamus voluptas blanditiis nostrum quod perspiciatis beatae dolor quae?</p>
</body>
</html>
浏览器显示效果
像例四中这种盒子到底是如何工作的？
现在我们在段落的图片之间添加额外的空白。
添加如下css: p{margin:20px}
此刻你将会发现在图片和段落之间不会产生额外的空白
浏览器显示效果
相反我们为图片添加：
img{margin:20px;}，则会发现图片和段落之间产生了额外的空白
为图片添加margin
为什么增加段落的margin不会在段落和图片之间产生额外的空白？这就涉及到一个段落的盒模型。
给段落加上如下代码：p{border:1px solid #ccc; },结果如下：
给段落加上border
正如你所看到的，图片实际上在段落盒子的里面，所示设置margin显示在段落外面，这就是为什么在图片和段落之间不会怎么额外的额外的空白。
如果我们想要改变这种行为，让段落不在环绕图片，我们则可以给段落也设置浮动，让段落浮动到左边，并且设置相应 的宽度
疯狂怪异的浮动原则
通常开发人员会用浮动来控制列表的位置，例如让多个块级元素行排列
例如：给li设置相同的高度，并且所有li左浮动，结果展示所有li排列成一行，当超出一行时，换行显示
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul{
overflow: hidden;
}
ul>li{
width: 100px;
height: 100px;
background: #fff;
overflow: hidden;
box-shadow: 2px 2px 5px rgba(0,0,0,.2);
float: left;
margin-right: 15px;
margin-bottom: 15px;
position: relative;
transition:1s all;
margin-top: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
</body>
</html>
image.png
上面例子显示当我们所有的li高度相同时的浮动排列，如果我们给li设置不同的高度时，它会怎样浮动呢？
image.png
图片中显示，当元素5高度不一致时，会发现元素7显示在右边，它不会让自己尽可能的浮动到左边，如果我们去掉这些li的浮动，设置
li {display：inline-block;},结果显示截然不同。
image.png
跟上面不同之处是，图片的默认状态是沿着它们的底部边缘垂直对齐，为了显示和浮动一样的效果，我们设置```li{vertical-align:top;}
image.png
现在看起来和浮动相似了，那么，我们设置浮动的li元素为何没有像这样显示？
事实证明，css规范列出了九条规则来规定浮动的行为。
1、浮动元素会被推到他的容器的边缘
2、任何浮动元素都会出现在他之前的浮动元素的旁边或者下方，如果元素都是左浮动，那么第二个元素会出现在第一个元素的右边，如果都是右浮动，第二个元素会出现在第一个元素的左边。
3、左浮动的盒子不能出现在右浮动盒子的右边
4、浮动元素不能高过他的容器的上边缘（当涉及到塌陷的边距会将更复杂）
5、浮动元素不能比前一个块级元素或者浮动元素高
6、浮动元素不能高过前一行内联元素
7、靠着另一个浮动元素的浮动元素不能超过自己的父容器边缘
8、一个浮动的盒子必须尽可能的高的放置
9、一个左浮动的盒子必须尽可能左的放置，一个右浮动的盒子要尽可能的右的放置，尽可能高的位置的优先级比左右高
根据css的规则，上面问题的原因是：当有一个浮动元素时，后面紧接着的浮动元素至少要占据与之前同样或者更多的垂直高度来打破这一行使得流动下移。
清除浮动的影响
1、为后面的元素设置clear:left、clear:right、clear:both
2、当一个给点的元素只包含浮动元素时会产生奇怪的现象：父元素的高度会塌陷，
例如：我们给父元素添加背景
当未设置浮动时显示如下：
image.png
当设置了浮动后，显示如下：
image.png
你会发现当我们设置了浮动后，导致父元素的高度塌陷，如何解决这种父元素高度塌陷的问题？
- 方案一：创建一个跟浮动元素同级的空元素（常常是一个div），然后给空容器设置
clear:both属性，就会解决这种高度塌陷的问题
<div class="clearfix" style="clear:both"></div> - 方案二：新的解决方案是利用overflow属性，这个属性控制了超出其包含框边界的内容的功能。如果将父项目的overflow设置为hidden或者auto，也能解决高度坍塌。
ul { overflow: auto;} - 方案三：如果子元素全部浮动，父元素就会塌陷，所以在所有浮动子元素后添加一个没有浮动元素把父元素撑起来，这个元素找不到、不占据空间，不能让它里面有内容，有内容也要隐藏
.clearfix:after{content:'.';
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;
}
.clearfix:after{zoom：1；}/*解决IE的问题*/
