注册博客园也有一段时间了，一直都是看其他大牛的博客，感触颇多，都是我要学习和努力的目标，慢慢的心底也萌生了要写博客的嫩芽，虽然自己也是步入前端这一行业不久的工作者,希望各位大前端行业的前辈多多指教啦！
我写博客的目的呢就是，一呢，总结自己学过和运用的的技术和知识，系统的梳理知识点和原理，加深印象；二呢，报着学习交流的态度，希望大家多多督促，有什么讲的不对的地方欢迎指出啦！当前是为了一份更好的更适合自己的job，find好的工作机会啦!
我相信，一步步的坚持下去，会成为一个优秀的前端程序媛！哈哈！
第一次写博客，虽然接触css许久，也有过许多的HTML+css页面开发的项目经验，但是对float浮动这个原理有时候还是那么是懂非懂得样子，今天我就系统的梳理下浮动相关的知识，献丑啦！
了解float之前先简单的了解下什么是文档流。
文档流：文档流是文档中可显示对象在排列中所占用的位置。通俗的说，将窗体自上而下分成一行一行，并在每行中按从左到右挨次排放元素，即为文档流。
比如网页的div标签它默认占用的宽度位置是一整行，p标签默认占用宽度也是一整行，因为div标签和p标签是块状对象。网页中大部分对象默认是占用文档流，也有一些对象是不占用文档流的，比如表单中的隐藏域。
浮动的定义：
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。---《w3c》,通俗的说，就是浮动元素漂浮的普通流之上。
CSS 中所有的float属性
| 属性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允许元素周围有浮动元素。 | left right both none inherit |
1 |
| float | 指定一个盒子（元素）是否可以浮动。 | left right none inherit |
1 |
CSS的float特征（简洁的总结了一下）：
1：使块元素在一行显示；
2：使内嵌元素支持宽高；
3：不设置宽度的时候宽度由内容撑开；
4：脱离文档流
5：提升层级半层
下面详细分解float：
demo1：设置元素float:left
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_float</title>
</head>
<style type="text/css">
body{
margin:0;
font-family: "微软雅黑";
font-size: 20px;
}
#wrap{
margin: 0 auto;
width: 800px;
border: 2px dashed black;
height: 600px;
}
.div1,.div2,span{
float: left;
}
.div1{
width: 100px;
height: 100px;
background-color: cadetblue;
}
.div2{
width: 180px;
height: 120px;
background-color: coral;
}
.span1{
width: 220px;
height: 280px;
background-color: burlywood;
}
.span2{
width: 280px;
height: 330px;
background-color: crimson;
}
</style>
<body>
<div id="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</div>
</div>
</body>
</html>
输出结果：
demo2：设置元素float:right
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_float</title>
</head>
<style type="text/css">
body{
margin:0;
font-family: "微软雅黑";
font-size: 20px;
}
#wrap{
margin: 0 auto;
width: 800px;
border: 2px dashed black;
height: 600px;
}
.div1,.div2,span{
float: right;
}
.div1{
width: 100px;
height: 100px;
background-color: cadetblue;
}
.div2{
width: 180px;
height: 120px;
background-color: coral;
}
.span1{
width: 220px;
height: 280px;
background-color: burlywood;
}
.span2{
width: 280px;
height: 330px;
background-color: crimson;
}
</style>
<body>
<div id="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<span class="span1">span1</span>
<span class="span2">span2</div>
</div>
</body>
</html>
输出结果：
结论1：
浮动元素会生成块级框，无论这个元素本身是什么，所以浮动元素会使块元素随着浮动指定的方向并列一行显示，浮动元素使内嵌元素支持宽度和高度。
浮动元素的左（或右）外边界不能超出其包含块的左（或右）内边界，也就是说，左浮动的元素左外边界向左只能到其包含块的左内边界，右浮动元素同理
一个浮动元素的顶端不能比其父元素的内顶端更高，从上图显示可以看出，无论是左浮动，还是右浮动；这样避免了浮动元素一直浮动到文档的顶端
demo3：标准流的块元素div
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_float</title>
</head>
<style type="text/css">
body{
margin:0;
font-family: "微软雅黑";
font-size: 20px;
}
#wrap{
margin: 0 auto;
width: 800px;
border: 2px dashed black;
height: 600px;
}
.div1{
width: 100px;
height: 100px;
background-color: cadetblue;
}
.div2{
width: 180px;
height: 120px;
background-color: coral;
}
.div3{
width: 220px;
height: 100px;
background-color: burlywood;
}
.div4{
width: 280px;
height: 150px;
background-color: crimson;
}
</style>
<body>
<div id="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">span1</div>
<div class="div4">span2</div>
</div>
</body>
</html>
输出结果：
demo4：把demo3中的div2设置为float:left,
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>css_float</title>
6 </head>
7 <style type="text/css">
8 body{
9 margin:0;
10 font-family: "微软雅黑";
11 font-size: 20px;
12 }
13 #wrap{
14 margin: 0 auto;
15 width: 800px;
16 border: 2px dashed black;
17 height: 600px;
18 }
19 .div1{
20 width: 100px;
21 height: 100px;
22 background-color: cadetblue;
23 }
24 .div2{
25 width: 180px;
26 height: 120px;
27 background-color: coral;
28 float: left;
29 }
30 .div3{
31 width: 220px;
32 height: 220px;
33 background-color: burlywood;
34 }
35 .div4{
36 width: 280px;
37 height: 150px;
38 background-color: crimson;
39 }
40 </style>
41 <body>
42 <div id="wrap">
43 <div class="div1">div1</div>
44 <div class="div2">div2</div>
45 <div class="div3">div3</div>
46 <div class="div4">div4</div>
47 </div>
48 </body>
49 </html>
输出结果：
结论2：
当div2 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，但是div1，div3，div4仍然在普通流中，至上到下依次排列；所以div3会自动上浮，直到上个元素的底端。
demo5：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_float</title>
</head>
<style type="text/css">
body{
margin:0;
font-family: "微软雅黑";
font-size: 20px;
}
#wrap{
margin: 0 auto;
width: 800px;
border: 2px dashed black;
height: 600px;
}
.div1{
width: 100px;
height: 100px;
background-color: cadetblue;
}
.div2{
width: 180px;
height: 120px;
background-color: coral;
float: left;
}
.div3{
width: 220px;
height: 220px;
background-color: burlywood;
float: right;
}
.div4{
width: 480px;
height: 150px;
background-color: crimson;
/*float: left;*/
}
</style>
<body>
<div id="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body>
</html>
输出结果：
结论3：
浮动元素的顶端不能比之前所有的浮动元素或块级元素的顶端更高。
de
|
|
|
 |
 |
 |
|
|
|
mo6：所有div设置做浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css_float</title>
</head>
<style type="text/css">
body{
margin:0;
font-family: "微软雅黑";
font-size: 20px;
}
#wrap{
margin: 0 auto;
width: 800px;
border: 2px dashed black;
height: 600px;
}
.div1{
width: 100px;
height: 100px;
background-color: cadetblue;
float: left;
}
.div2{
width: 180px;
height: 120px;
background-color: coral;
float: left;
}
.div3{
width: 220px;
height: 220px;
background-color: burlywood;
float: left;
}
.div4{
width: 480px;
height: 150px;
background-color: crimson;
float: left;
}
</style>
<body>
<div id="wrap">
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
</div>
</body>
</html>
输出结果：
结论4：
浮动元素不能超出其包含元素的边界。如果超出了边界，后者的浮动元素就会挤到新行上。如果前面的浮动元素高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”，后者浮动元素的顶端始终与上一个浮动元素的底部对齐
所以因为上图div1,2,3,4元素总体宽度超过了他的父级宽度，div4被挤到一个新行上，顶端与上一个浮动元素div3的底部对齐