1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?
- 浮动元素会脱离正常的文档流，不占据文档流中的空间，所以后面的元素会占据原本元素的空间，就是说后面的元素会被遮挡。
- 文字可以感知浮动元素，遇到浮动元素边框会避开。
- 浮动后的元素会处于同一层，并且依次排列。
- 如果有其他元素有清除浮动，同一层的浮动元素则会另起一行放置
2、清除浮动 和 闭合浮动的区别？
清除浮动：对被影响文档位置的块级元素添加属性clear：left | right | both | none;，使其下移，直到元素两边没有浮动元素。
闭合浮动：更确切的含义是使浮动元素闭合，使父元素高度不再塌陷，高度被撑开了，使父元素能够包围浮动元素，从而减少浮动带来的影响。
通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在footer上设置clear：both清除浮动并不能解决wrap高度塌陷的问题。
3、闭合浮动的方法
1、添加额外的标签
通过在浮动元素末尾添加一个空标签，其他块级元素标签等亦可
<section class="wrap">
<div class="main">main：wrap自己闭合浮动了，所以footer不用再清除浮动了(float:left)</div>
<div class="side">side：我也浮动了(float:left)</div>
<div style="clear:both;"></div>
</section>
<footer class="footer2">footer：这次wrap人品爆发了, 通过在末尾添加了一个空标签，已经<b>闭合浮动</b>了</footer>
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单，代码少，浏览器支持好，不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，代码语义化变差，不建议使用
2、使用:after 伪元素
.wrap:after{
content:'.';
display:block;
clear:both;
height:0;
visibility:hidden;
}
3、父元素设置overflow:hidden / auto
优点：不存在结构和语义化问题，代码量极少。
overflow:hidden 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
overflow:auto 缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。
4、父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：如图所示wrap浮动于footer之上，该方法会使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不建议使用
5、父元素设置display:table / table-cell / inline-block / flow-root
优点：结构语义化完全正确，代码量极少
display:table 缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用
以上列举的闭合浮动方法，无非有两类：：
- 通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
- 通过设置父元素 overflow 或者display：table 属性等来闭合浮动，其实这是触发了Block formatting contexts （块级格式化上下文），以下简称 BFC。
如何触发BFC？BFC的特性？
上面已经列举了7种闭合浮动的方法，通过了解BFC，我们发现其实更多的：display：table-cell，display：inline-block等只要触发了BFC的属性值都可以闭合浮动。从各个方面比较，after伪元素闭合浮动无疑是相对比较好的解决方案了，以下是该方法。
.clearfix:after {
content:''; /*生成内容*/
display:block; /*使生成的元素以块级元素显示,占满剩余空间*/
clear:both;
}
.clearfix {
*zoom:1; /* 触发IE hasLayout，为了兼容IE<8 */
}
