1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响?

1. 浮动元素会脱离正常的文档流，不占据文档流中的空间，所以后面的元素会占据原本元素的空间，就是说后面的元素会被遮挡。
2. 文字可以感知浮动元素，遇到浮动元素边框会避开。
3. 浮动后的元素会处于同一层，并且依次排列。
4. 如果有其他元素有清除浮动，同一层的浮动元素则会另起一行放置

2、清除浮动 和 闭合浮动的区别？

清除浮动：对被影响文档位置的块级元素添加属性clear：left | right | both | none;，使其下移，直到元素两边没有浮动元素。
闭合浮动：更确切的含义是使浮动元素闭合，使父元素高度不再塌陷，高度被撑开了，使父元素能够包围浮动元素，从而减少浮动带来的影响。

清除浮动 和 闭合浮动的区别 https://jsbin.com/yayaqekari/1/edit?html,css,output

通过以上实例发现，其实我们想要达到的效果更确切地说是闭合浮动，而不是单纯的清除浮动，在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; 
}

::after 伪元素

3、父元素设置overflow:hidden / auto

overflow:hidden / auto

优点：不存在结构和语义化问题，代码量极少。
overflow:hidden 缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
overflow:auto 缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等。

4、父元素也设置浮动

对父元素设置 float:left

优点：不存在结构和语义化问题，代码量极少
缺点：如图所示wrap浮动于footer之上，该方法会使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不建议使用

5、父元素设置display:table / table-cell / inline-block / flow-root

display:table

优点：结构语义化完全正确，代码量极少
display:table 缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

以上列举的闭合浮动方法，无非有两类：：

1. 通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；
2. 通过设置父元素 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 */   
}