技术背景 前端开发绘制页面时，设置了浮动的元素会脱离文档流，无法撑开父级元素的高度，就会导致浮动元素的父级高度塌陷问题（高度为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; }特点：同方法三，俗称万能清除浮动~~
有待完善，请赐教~
