CSS系列2-定位3：清除浮动2

    那么如何清除浮动呢？

一. 对父元素设置合适的高度

    既然是高度塌陷，那一个很理所当然的想法就是我给它设置一个高度，这样我的父级元素就能显示出来了，并且也弥补了之后布局的影响。

    这样乍一看好像是解决了浮动的问题，我的ul也有高度了显示出来了，但是理解流布局的小伙伴应该也知道，这实际上并没有解决浮动的问题，因为我的ul里其实没有包含li元素，它依然是独自存在着。因此这种方法不建议使用。

二. 定义clear属性

    clear 属性定义了元素的哪边不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。

值描述left在左侧不允许浮动元素。right在右侧不允许浮动元素。both在左右两侧均不允许浮动元素。none默认值。允许浮动元素出现在两侧。inherit规定应该从父元素继承 clear 属性的值。

    通过在浮动元素末尾添加一个有clear属性的空标签可以清除浮动。

    还可以使用br自带的both属性

    这个方法虽然确实达到了效果，担一个很大的问题就是提高了代码量，有违结构与表现的分离。因此这种方法也不建议使用。

三. 父元素设置overflow:hidden

    在父元素上设置overflow:hidden可以使父级元素紧贴内容（包括浮动的内容），从而清除了浮动

    据说这个方法有一个缺点就是内容增多时容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素，并且还会导致中键失效。这些缺点我没有理解实现出来，如果有实现了的欢迎交流。

四. 父元素设置浮动

    这种方式确实能够清除浮动，但父元素也脱离了文档流，属性也会改变，会对相邻的元素布局造成影响。而且你也不能一直浮动到body元素吧……这种方法不建议使用。

五. 父元素设置display:table

    这种方法确实达到了效果，父元素也没有脱离文本流，但是它的属性完全改变了，不建议使用。

六. 使用:after伪元素

    这种方法其实也是在父元素后面生成了一个内容为点的块级元素

<style type="text/css"> .clearfix:after { content: ".";display: block;height: 0;clear: both;visibility: hidden; } .clearfix {display: inline-block;}  /* for IE/Mac */  </style><!--[if IE]> <style type="text/css">.clearfix {zoom: 1;/* triggers hasLayout */ display: block;/* resets display for IE/Win */}</style> <![endif]-->

鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } .clearfix { *zoom:1; }

这就是我们常用的清除浮动的方法。

从上面所有的方法可以看出，清除浮动总体来说就两种：

1. 浮动元素的末尾添加一个空元素，设置clear:both；

2. 设置父元素的overflow和display属性。

参考网址：

http://www.cnblogs.com/mofish/archive/2012/05/14/2499400.html

http://www.w3school.com.cn/cssref/pr_class_clear.asp