L6. 清除浮动

清除浮动

　　浮动元素之后的元素会自动围绕该浮动元素。如果不希望周围有元素围绕，则可以为这些元素定义“clear”属性以清除浮动。clear 的属性有及其值为：

　　clear: left;　清除左边的浮动对象，如果左边存在浮动对象，则当前元素会在浮动对象底下显示。
　　clear: right;　清除右边的浮动对象，如果右边存在浮动对象，则当前元素会在浮动对象底下显示。
　　clear: both;　清除左右两边的浮动对象，不管哪边存在浮动对象，当前元素都会在浮动对象底下显示。
　　clear: none;　默认值，允许两边都可以有浮动对象，当前元素浮动元素不会换行显示。
　　有很多技巧可以做到清理浮动元素，但不引入额外的无语义标签。下面三种是比较常见的做法：

　　1、插入一个使用不浮动的空区块（clear: both;）。
　　插入一个清除元素是使父级容器能正确包含其所有浮动元素是一种标准的做法（即插入一个非浮动区块<div class="clearbox"></div>），这样做能实现将父级容器的底部边缘“拖拉”以包裹所含元素的效果。

　　2、在容器元素上使用 overflow: hidden。
　　对于基于浮动设计的布局来说，一个常见的问题就是浮动元素的容器不会自动伸展来包含浮动元素。如果希望在所有的浮动元素的外面加上边框（如在容器元素上加上边框），这时必须告诉浏览器伸展容器以包含浮动元素，这时就可使用 overflow 的方法。

　　3、使用 :after 这样的 CSS 伪类。
　　创建一个不可见的高 度为0的块元素：使用 :after 来插入一个点号，并且设置它的属性为 clear: both。但是容器底部会有一丝空隙，所以还要设置 height: 0px; 和 visibility: hidden; 来去除这个空隙。 *zoom:1 用来兼容IE6/7

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

　　　浮动清除只能适用浮动对象之间的清除，为非浮动对象定义清除属性是无效的。但 IE 浏览器不支持这种标准。当一个浮动元素定义了 clear 属性，它不会对前面的任何对象产生影响，也不会对后面的对象形成影响，只会影响自己的布局位置。这里的影响是指不会主动改变别的对象的位置。浮动清除不仅针对相邻浮动元素对象，只要在布局页面里水平接触都会实现清除操作。
　　使用浮动元素包含浮动元素这样的布局方式有一个潜在的缺点，其实现效果将取决于浏览器的对 CSS 的支持与解析。特别是当浮动元素是一个更为复杂的布局中的一部分的话，将变得更加复杂。鉴于浏览器对流动模型解析的一致性，因此大多数时候，浮动模型只是作为流动模型布局的辅助与补充，这不失为一个很好的布局原则。

另外，还有一种新的方法清除浮动。http://nicolasgallagher.com/micro-clearfix-hack/

.cf { zoom: 1; }
.cf:before,
.cf:after { content: " "; display: table; }
.cf:after { clear: both; }

content: " "带空格, :before 对于清除浮动不是必要的,但它可以防止top-margins发生折叠collapsing。

display: table; 会产生一个 anonymous table-cell 和一个新的BFC,所以不需要height:0; visibility:hidden; 这两句代码了。

摘自： http://huhaiqia.blog.163.com/blog/static/1011519482010864923907/