速记：清除浮动的三种方法

在今天的布局训练中学到了运用float来使标签浮动，这样便于排版，但在使用float的过程中，有的块在浮动后块内的块标签是不需要浮动的，这时就需要清楚浮动效果。

清楚浮动效果有三种方式：

1：

.cleer{
		clear: both;
	}

2:

.cleer{
		overflow: hidden;
		zoom:1;
	}

3:

.fd{
	float: left;
	border: 50px solid blue;
}
.fd:after{
	clear: both;
	/*height: 0;
	overflow: hidden;  */  /* 二选一*/
}

以上三种方法在一般浏览器上实现完全没问题，但在ie6上就可能出问题了，特别是布局这一部分。

额，本来准备写一下这个BUG的触发条件的，结果一查，好多人总结了，那我就直接放个链接借用一下吧：http://newdefence.blog.163.com/blog/static/173910225201092092450454/

1、3像素bug，是IE6的一个著名的bug，当浮动元素与非浮动元素相邻时，这个3像素的Bug就会出现，明显看出，IE6会在两个div中间加上3px的空隙，那么要解决这个问题，请在左边的div上加上_margin-right:-3px;记住，前边加上一下划线，这样这个样式专门针对IE6生效。IE7和FF下还会正常显示。看看，是不是问题已经解决了。但它不能通过W3C验证。当两列固定宽度时，最好把#main也固定宽度且向右浮动，这样就可以避免IE6的3像素bug了。



2、按照我们正常的理解，认为应该是两个值相加，其实这里是两个合并后取最大值。用css手册中的话说：块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。



3、父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角，相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右！

4、border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示。

table

{

border-collapse:collapse;

}

浏览器支持

所有主流浏览器都支持 border-collapse 属性。

注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit（继承）"。

separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。

collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

inherit 规定应该从父元素继承 border-collapse 属性的值。



5、浮动后父容器高度自适应

当一个容器内元素都浮动后，它将高度将不会随着内部元素高度的增加而增加，所以造成内容元素的显示超出了容器。为了便于查看效果，把刚才实例中的#layout增加一个边框和内边距：

#layout { width:400px; border:2px solid #ccc; padding:2px;}

看到没，它没有被内容元素给撑高，要解决这个问题，需要使用以下样式

overflow:auto; zoom:1;

overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写（此样式不能通过W3C验证）。



6、IE6的一个BUG，(IE6双倍边距BUG)，只要满足下面3个条件才会出现这个BUG:

1）要为块状元素；

2）要左侧浮动；

3）要有左外边距(margin-left)；

解决这个BUG很容易，只需要在相应的块状元素的CSS树形中加入“display:inline;”

#redblock

{

width:200px;

height:200px;

background:#900;

margin-top:20px;

maigin-left:20px;

float:left;

display;inline;

}

7

#menu ul { list-style: none; margin: 0px; padding: 0px; }
 
#menu { width:370px; margin:0 auto; border: 1px solid #CCC; height:26px; background: #eee;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { float:left;}
#menu ul li a { display:block; padding: 0px 8px; height: 26px; line-height: 26px; float:left;}
#menu ul li a:hover { background:#333; color:#fff;}

这里的#menu ul li a本来是可以不加float:left的，但IE6下在li没有设置宽度，#menu ul li a设置display:block的情况下，将会显示错乱，所以需要在a上增加float:left来修正。

再加一个链接，看着很屌总结了好多的IE6bug：http://www.cnblogs.com/liko/category/296859.html