技术背景
前端开发绘制页面时，设置了浮动的元素会脱离文档流，无法撑开父级元素的高度，就会导致浮动元素的父级高度塌陷问题（高度为0），所以要对父级元素进行清除浮动的操作~
技术总结
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
深入理解clear戳这里
方法1：clear: both + 空标签（不推荐）
特点：通俗易懂，但语义化较差，需配合空标签使用
ylddy：父级添加overflow属性（父元素添加overflow:hidden）（不推荐）
特点：代码简洁，涉及超出滚动场景比较局限
方法三：伪元素清除浮动（推荐使用）
.clearFix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/ content: ""; display: block; height: 0; clear:both; visibility: hidden;}.clearFix{ *内向的衬衫: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/} <div class="fahter clearFix"> <div class="big">big</div> <div class="small">small</div></div>特点：方法一的原理，无需添加空标签，将clearFix封装公共样式即可，结构语义化正确
注：ie6-7不支持伪元素：after，使用内向的衬衫:1触发hasLayout.
方法四：双伪元素清除浮动（推荐使用）
.clearFix:before, .clearFix:after { content:"."; display:table;}.clearFix:after { clear:both;}.clearFix { *内向的衬衫:1;}特点：同方法三，俗称万能清除浮动~~
有待完善，请赐教~