元素浮动与浮动清除

• 元素浮动

float: left | right | none

1、浮动的元素，将向左或者向右浮动，浮动到包围元素的边上，或者上一个浮动元素的边上为止。

2、浮动的元素，不再占用空间，且浮动元素的层级要高于普通元素。

3、浮动的元素，一定是块元素，不管之前是什么元素

4、如果浮动的元素没有指定宽度的话，浮动后会尽可能变窄，因此浮动元素要指定宽和高

5、一行的多个元素，要浮动大家一起浮动

元素浮动的影响

（1）背景不能显示 （2）边框不能撑开 （3）margin 设置值不能正确显示

• 常用的浮动清除的方法

1、clear:both

原理：在父级元素结束前添加一个空元素，并为其设置CSS样式：clear:both;清除该元素两边的浮动，这样可以使父级元素自动获取到高度；2、overflow:hidden | auto

原理：为父级元素定义overflow属性为hidden或者auto；同时必须定义width或zoom:1;,且不能定义height。这样浏览器就可以自动检查浮动区域的高度。此方法不能与position属相配合使用，因为超出的内容会被隐藏，或者出现滚动条。本质上是触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文)，使到该父元素可以包含浮动元素

3、使用css的伪元素:after

原理：结合 :after 伪元素（注意这不是伪类，而是伪元素，代表一个元素之后最近的元素）和 IEhack ，可以完美兼容当前主流的各大浏览器，这里的 IEhack 指的是触发 hasLayout。给浮动元素的容器添加一个clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素（Block element）清理浮动。通过CSS伪元素在容器的内部元素最后添加了一个看不见的空格"020"或点"."，并且赋予clear属性来清除浮动。需要注意的是为了IE6和IE7浏览器，要给clearfix这个class添加一条zoom:1;触发haslayout。

总结：在网页主要布局时使用:after伪元素方法并作为主要清理浮动方式；在小模块如ul里使用overflow:hidden;（留意可能产生的隐藏溢出元素问题）；如果本身就是浮动元素则可自动清除内部浮动，无需格外处理；正文中使用邻接元素清理之前的浮动。

最后可以使用相对完美的:after伪元素方法清理浮动，文档结构更加清晰。

http://www.cnblogs.com/dolphinX/p/3508869.html