面试篇：清除浮动的几种方法

技术背景
前端开发绘制页面时，设置了浮动的元素会脱离文档流，无法撑开父级元素的高度，就会导致浮动元素的父级高度塌陷问题（高度为0），所以要对父级元素进行清除浮动的操作~

技术总结

• clear语法：
  clear : none | left | right | both

• 取值：
  none : 默认值。允许两边都可以有浮动对象
  left : 不允许左边有浮动对象
  right : 不允许右边有浮动对象
  both : 不允许有浮动对象
  深入理解clear戳这里

方法1：clear: both + 空标签（不推荐）

特点：通俗易懂，但语义化较差，需配合空标签使用

方法二：父级添加overflow属性（父元素添加overflow:hidden）（不推荐）

特点：代码简洁，涉及超出滚动场景比较局限

方法三：伪元素清除浮动（推荐使用）

.clearFix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
   content: "";
   display: block;
   height: 0;
   clear:both;
   visibility: hidden;
}
.clearFix{
   *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
 
<div class="fahter clearFix">
   <div class="big">big</div>
   <div class="small">small</div>
</div>

特点：方法一的原理，无需添加空标签，将clearFix封装公共样式即可，结构语义化正确
注：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout.

方法四：双伪元素清除浮动（推荐使用）

.clearFix:before, .clearFix:after { 
  content:".";
  display:table;
}
.clearFix:after {
 clear:both;
}
.clearFix {
  *zoom:1;
}

特点：同方法三，俗称万能清除浮动~~

有待完善，请赐教~