作者:
WangMin
格言:努力做好自己喜欢的每一件事
标准流：元素会各占整行位置。子元素如果是标准流，父元素即使没有设置高度，也会撑开父盒子高度，也就是说父元素的高度会随着子元素的高度改变。
浮动：子元素浮了起来，脱离了文档流，所以不会占据原来的位置，若父元素没有设置高度，则子元素不会撑开父元素，也就是说父元素的高度不会随着子元素的高度改变，此时父元素的高度为0。
注意：
浮动可以让多个块级元素在一行显示，且块与块之间没有空隙，但要注意给父盒子清除浮动，否则父盒子不会被撑开。
div配合float浮动来做页面的布局，浮动最常用的地方就是用来做布局。
浮动的特点：
浮动的元素可以向左向右移动，直到它的外边框碰到父元素的外边框或另一个浮动框的边框为止。
由于浮动的元素不在文档的普通流中，所以文档的普通流中的元素表现的就像浮动框不存在一样。换一种说法就是，当一个元素浮动了之后，原来所处的位置就空了出来，它之后的元素会移动到这个位置，此时后面元素就被浮动元素遮住了，像是在网页中消失了一样。
不会独占一行，可以与其他元素共用一行。
不会margin合并，也不会margin塌陷，可以设置四个方向的margin与padding。
不会出现行内块的空白问题。
浮动float的三种取值：
float:left //向左浮动
float:right //向右浮动
float:none //默认值不浮动
为什么要清除浮动？
清除浮动主要是为了解决父级元素因为子级浮动引起的内部高度为0的问题。也就是说一个盒子里使用了CSS float浮动属性，导致父级不能被子元素撑开，这时候就需要清除浮动，才能让元素内容正常显示。
<div class="box">
<div class="one"></div>
<div class="one"></div>
</div>
.box{
border:1px solid #ccc;
}
.box>.one{
width:200px;
height:200px;
background:#000;
float: left;
margin-right: 10px;
}
浮动产生样式效果截图：
本来两个黑色对象盒子是在灰色盒子内，因为对两个黑色盒子使用了float浮动，所以两个黑色盒子产生了浮动，导致灰色盒子不能撑开，这样浮动就产生了。
浮动产生的影响
1、背景不能显示
由于浮动产生，如果对父级设置了（CSS background背景）CSS背景颜色或CSS背景图片，而父级不能被撑开，所以导致CSS背景不能显示。
2、边框不能撑开
如上图中，如果父级设置了CSS边框属性（css border），由于子级里使用了float属性，产生浮动，父级不能被撑开，导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
清除浮动的方法
1、额外标签法：给谁清除浮动，就在其后额外添加一个空白标签 。给空白标签自定义一个清除浮动的类，如下：
.clear{
clear:both;
}
2、 父级添加overflow方法：可以通过触发BFC（块级格式化上下文）的方式，实现清楚浮动效果。别加错位置，是给父级元素加overflow属性（并不是所有的浮动都需要清除，谁影响布局，才清除谁。）如下：
overflow:hidden;
注意：元素内容过多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
3、使用after伪元素清除浮动：：after方式为额外标签法的升级版，好处是不用单独加标签了。这个也是给父亲添加 自定义类 .clearfix，代码如下：
.clearfix{
*zoom:1; //ie6清除浮动的方法
}
.clearfix:after{
content: "";
display: block;
height:0;
clear:both;
visibility: hidden;
}
4、使用before和after双伪元素清除浮动，这个也是给父亲添加 自定义类 .clearfix，代码如下：
.clearfix{
*zoom:1;
}
.clearfix:after{
clear:both;
}
.clearfix:after,.clearfix:before{
content: "";
display: table;
}
注意：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.
5、对父级设置适合CSS高度（不推荐使用）
对父级设置适合高度样式清除浮动。就用上边的例子来说，给 '.box' 设置一定高度即可，一般设置高度需要能确定内容高度才能设置。这里 '.box' 内容高度是200px+上下边框为2px，这样具体父级高度为202px。
6、给父元素设置浮动，但会影响到后面的元素位置（不推荐使用）
利用以上几种清除浮动的方法以后的效果如下：
以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! :smile: 后续继续更新!!
