摘要：Eric:"当你浮动一个元素的时候... ... 这些(浮动)规则就好像在说：‘劲量把这个元素网上放，能放多高放多高，知道碰到某个元素的边界为止。’" -- Cascading Style Sheets 2.0 Programmer's Reference
初入前端这一行，在面试时，经常会被问到清楚浮动这一问题。现在总结下我所知道的方法。
清除浮动是我们每一位前端设计必须掌握的。这里我总结了十种方法，前9种已经通过（IE,Chrome，firefox）测试，最后一种使用CSS3新属性，只支持主流浏览器。
/* 初始化样式 */
<style> div,p,img{border:0;padding:0;margin:0;} p{line-height:1.5;} div{border:1px solid blue;margin:0 0 10px 0;} img{float:left;width:150px;height:87px;} </style> <html> <div class="section"> <img src="img/1.jpg" alt=""/> <p>It's fun to float.</p> </div> </html>
一.使用overflow属性清楚浮动：
使用overflow这几种方法，浏览器会自动检测浮动元素高度。必须配合zoom:1或者固定高度，结局IE兼容问题。
优点：代码少，简单，浏览器支持好
1.overflow:hidden
.section{overflow:hidden;zoom:1}
缺点：超出的内容会被隐藏。如不能用于下拉菜单的顶级元素上，否则子元素下拉菜单不显示。
2.overflow:scroll
.section{overflow:scroll;zoom:1;}
缺点：页面会有滚动条的样式，如果元素高度固定，会存在滚动条。不建议使用
3.overflow:auto
.section{overflow:auto;zoom:1;}
二.父元素也同子元素一起浮动
4.浮动父元素。父元素{float:left/right}
.section{float:left;width:100%;}
优点：代码少，简单，容易理解。
缺点：需要重新设置元素width，又出现新的浮动问题。不能对已经自动居中的元素使用"浮动父元素"的方法，否则元素不会居中。
三.在父元负内部添加空标签，清楚浮动，父元素自动获取高度。
5.增加空标签，xxx{clear:both/left/right}
<style> s.clear{clear:left;display:block;} </style> <html> <div class="section3"> <img src="img/1.jpg" alt=""/> <p>It's fun to float.</p> <s class="clear"></s> </div> <div class="footer">Here is the footer element that runs across the bottom of the page.</div> </html>
优点：代码少，浏览器支持好，不易出现怪异问题。
6.增加<br style="clear:both"/>
缺点：如果浮动布局多，会增加许多空标签。
四.使用伪类标签。
该方法由程序猿Tony Aslett发明，只添加一个清除的空字符作为非浮动元素。规则中其他什么保证为元素没有高度。使用clear:both意味着div中新增的子元素会清除左右浮动，这里可以只使用left，但both也适用于图片float:right.
7.使用::after{}设置
.clearfix{zoom:1}/*解决IE*/ .clearfix是::after{ content:""; display:block; clear:both; }
原理：IE8以上和主流浏览器支持::after，zoom解决IE6、7的浮动问题。
优点：浏览器支持性好，目前大型网站都有使用。
缺点：代码多，初学者不好掌握(最开始面试时，只知道有伪类清楚浮动方法，具体内容总是忘记)。需要两句代码让浏览器支持。
五.固定父元素高度
8.设置父元素height。
.section{height:100px;}
优点：代码少，初学者容易掌握理解。
缺点：不是所有页面中的元素高度都是固定不变的，在实际应用中不合适。
六.使用display属性
9.display:table
.section{display:table;width:100%;}
原理：将父元素变成表单格式。只做了解。
10.display:flex;
.section{display:flex;}
原理：flex将元素作为弹性伸缩盒显示(最新版本)，是CSS3新增属性值，IE6.0-10.0不支持。
七.父元素不能