请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式？

为什么出现浮动？

浮动float最开始出现的意义是为了让文字环绕图片而已，但人们发现，如果想要三个块级元素并排显示，都给它们加个float来得会比较方便。

什么时候清除浮动？

如果想要实现三个块级元素并排显示，期望效果如下图所示：

给三个块级元素都加上float属性后，页面效果如下图所示：

问题出现了，父元素高度塌陷了

一目了然：如果我们给上面的三个绿颜色的方块设置:-block也能达到让它们并排显示的效果。并且父元素的高度也不会塌陷。只不过无法控制是居左还是居右，:-block只能从左往右。

清除浮动的方式？

我们说的清除浮动是指清除由于子元素浮动带来父元素高度塌陷的影响。

清除浮动的两大基本方法：

方法1的具体实现：

1. 在父元素的最后加一个冗余元素并为其设置clear:both

原理如下：

当添加了最后一个冗余元素（未设置clear:both）时；父元素和此冗余元素的高度都为0，并且三个浮动的元素都浮在了它们的上方盖住了它们（可以把它们看成PS中的图层）。现在，给这个冗余元素添加clear:both（clear属性介绍），它便要躲开这三个浮动元素，因此，一直往下跑，直到没有被浮动元素盖住才停下来。而父元素看到这个子元素跑开了，自然想要包裹住它。

实现：

<div class="box"><div class="div">div><div class="clear">div>div>

.box{ width:300px;margin:0 auto;border:10px solid #000;}.div{ width:200px;height:200px;background:red;float:left;}.clear{ height:0px;font-size:0;clear:both;overflow: hidden;}

效果图如下：

此方法的缺点是，必要在页面中添加很多没有意义的冗余元素，太麻烦，而且不符合语义化。

2.采用伪元素，这里我们使用:after。添加一个类：

在我们需要清除浮动时，只需要给父元素追加clear类即可，既方便又符合语义化。

该方法的缺点是，IE6/IE7不识别:after伪元素，存在兼容性问题

<div class="box clearfix"><div class="div">div>div>

box{margin:0 auto;border:10px solid #000;
}
.div{ width:200px;height:200px;background:red;float:left;
}
//IE6采用zoom
.clearfix{*zoom:1;
}
//IE8+采用伪类
.clearfix:after{display:block;clear:both;/*clear:both的实现方法*/content:"";overflow:hidden;height:0;
}

当然，大神的fix类这么写：

.clear:after { content:""; display:table; /*采用此方法可以有效避免浏览器兼容问题*/clear:both;
}

方法2的具体实现：

使用属性，给父元素添加: ||auto

 overflow:hidden;zoom:1用于兼容IE6。

BFC/通常声明

BFC块级格式化上下文有以下特征：

不单单只有给父元素添加:才可以创建块级格式化上下文，下列方法都可以：

浮动 (元素的 float不为 none）绝对定位元素 (元素的 为 或 fixed)行内块 - (元素的 : -block)表格单元格 (元素的 : table-cell，HTML表格单元格默认属性)表格标题 (元素的 : table-，HTML表格标题默认属性)的值不为 的元素

弹性盒子 flex boxes (元素的 : flex 或 -flex)

采用float属性之后产生的现象：

砌砖布局的问题：

1、妙脆角-嘎嘣脆 - 容错性比较糟糕，容易出现问题

2、吝啬鬼-重用废 - 这种布局需要元素固定尺寸，很难重复使用

3、洋葱头-IE7飙泪 - 在低版本的IE下有很多问题

float与流体布局