float浮动的详细总结
1.定位方案
在css中，有4种常用的方法对元素进行定位和布局：
normal flow：标准流、文档流；
position：定位（relative、absolute、fixed）；
float：浮动；
flex：弹性布局；
其中浮动、定位的absolute和fixed都会让元素脱离标准流，以达到灵活布局的效果。
2.float的属性值
float属性的常用取值有以下3个：
none：不浮动（float的默认值）；
left：向左浮动；
right：向右浮动；
3.浮动的规则
3.1.规则一
元素添加浮动后，就会脱离标准流；
朝着向左或向右方向移动，直到自己的边界紧贴包含块（一般是父元素）或者其它浮动元素的边界为止；
示例代码：
.box {
width: 600px;
height: 200px;
background-color: #87ceeb;
}
.inner {
display: inline-block;
width: 100px;
height: 100px;
background-color: #0f0;
}
span { background-color: #f00; }
strong { background-color: #f0f; }
a { background-color: #fff; }
运行结果：没有给任何元素添加浮动，为标准流布局；
给strong元素添加float: left;，strong元素会移动到父元素box的左上角；
给strong元素添加float: right;，strong元素会移动到父元素box的右上角；
如果strong元素已经默认添加了浮动，然后给a元素再添加浮动，a元素会移动到贴紧strong元素的位置；
定位元素会层叠在浮动元素上：标准元素 > 浮动元素（非none） > 定位元素（非static）；
3.2.规则二
浮动元素不能与行内级内容层叠，行内级内容将会被浮动元素推出，从上面规则一的示例就可以看出；
这是因为设计float就是用于进行图文环绕的，是不会将行内级内容覆盖住的；
行内级内容包含行内级元素、inline-block元素、块级元素的文字内容等；
3.3.规则三
行内级元素、inline-block元素浮动后，其顶部将与所在行的顶部对齐；
从规则二中可以发现，图片在设置左浮动后，并没有移动到父元素的左上角，而是移动到了图片所在行的最左边；
3.4.规则四
元素向左（右）浮动，浮动元素的左（右）边界不能超出包含块的左（右）边界；
示例代码：
.box {
width: 400px;
height: 200px;
background-color: skyblue;
color: #fff;
}
.inner1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.inner2 {
float: right;
width: 100px;
height: 100px;
background-color: green;
}
运行结果：
3.5.规则五
浮动元素之间不能层叠；
如果一个元素浮动，另一个元素已经在那个位置了，后浮动的元素将紧贴前一个浮动元素（左浮找左浮，右浮找右浮）；
如果水平方向剩余的空间不够显示浮动元素，浮动元素将向下移动，直到有充足空间为止；
示例代码：给box中的所有元素设置float: left;。
.box {
width: 400px;
height: 500px;
background-color: skyblue;
color: #fff;
}
.inner1 {
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.inner2 {
float: left;
width: 200px;
height: 200px;
background-color: green;
}
.inner3 {
float: left;
width: 200px;
height: 200px;
background-color: purple;
}
.inner4 {
float: left;
width: 50px;
height: 250px;
background-color: blue;
}
运行结果：
3.6.规则六
浮动元素的顶端不能超过包含块的顶端，也不能超过之前所有浮动元素的顶端；
从规则五可以发现，inner4在设置浮动后，是不会超过inner3的顶部的，即使上面还有多余的位置；
4.浮动存在的问题及clear属性介绍
由于浮动元素脱离的标准流，变成了脱标元素，所以不再向父元素汇报高度了；
父元素在计算总高度时，就不会计算浮动子元素的高度，导致父元素高度坍塌问题；
解决父元素高度坍塌问题过程，叫做清除浮动，以下将提供几种清除浮动的方案；
5.clear属性
在说清除浮动方案之前，需要先了解一clear属性。
clear属性的常用取值：
属性值
作用
left
要求元素的顶部低于之前生成的所有左浮动元素的底部
right
要求元素的顶部低于之前生成的所有右浮动元素的底部
both
要求元素的顶部低于之前生成的所有浮动元素的底部
none
默认值，无特殊要求
一般clear只用在非浮动元素上，可以让非浮动元素与浮动元素不层叠。
5.清除浮动的常见方法
方案一：
给父元素直接设置固定的高度；
缺点：扩展性不好；
方案二：
在父元素最后增加一个空的块级子元素，并且设置clear: both;；
缺点：会增加很多无意义的空标签，后期维护麻烦，并且违反了结构与样式分离的原则；
方案三：
在父元素最后增加一个br标签：
；
缺点：与方案二一样；
方案四：
给父元素增加::after伪元素；
优点：纯css样式解决，结构与样式分离，并且没有新增多余标签；
一般使用伪元素清除浮动，都会单独写一个类，便于复用，使用时直接给父元素加上类型即可；
.clear-fix::after {
content: ""; /* 核心属性，缺一不可 */
display: block; /* 核心属性，缺一不可 */
clear: both; /* 核心属性，缺一不可 */
height: 0; /* 兼容旧浏览器 */
visibility: hidden; /* 兼容旧浏览器 */
}
.clear-fix {
*zoom: 1; /* 兼容IE6~7 */
}