L6. 清除浮动

清除浮动

　　浮动元素以后的元素会自动围绕该浮动元素。若是不但愿周围有元素围绕，则能够为这些元素定义“clear”属性以清除浮动。clear 的属性有及其值为：

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

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

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

　　三、使用 :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: " "带空格,  对于清除浮动不是必要的,但它能够防止top-margins发生折叠collapsing。:before

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

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