清楚浮动的10种方法

摘要：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不支持。

七.父元素不能