box浮动清除错误

[runkingzhang]

/*
这边是将clearfix方法内置到box中。
 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
*/
.ui-box{border:1px solid #ccc;zoom:1;font-size:12px;margin:0;padding:0;border-bottom:0}
.ui-box:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}
.ui-box-follow{border-top:0}
.ui-box-head{border-bottom:1px solid #ccc;position:relative;padding:10px;height:16px;line-height:16px;
background:-webkit-gradient(linear,left top,left bottom,from(#fcfcfc),to(#f9f9f9));
background:-moz-linear-gradient(top,#fcfcfc,#f9f9f9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9');
background:-o-linear-gradient(top,#fcfcfc,#f9f9f9);background:linear-gradient(top,#fcfcfc,#f9f9f9);zoom:1}
.ui-box-head .ui-box-head-title{color:#656565;font-size:14px;font-weight:700;float:left;display:inline;margin:0;padding:0}
.ui-box-head .ui-box-head-more{float:right}
.ui-box-head .ui-box-head-text{margin-left:10px;color:gray;float:left}
.ui-box-container{background:#fff;border-bottom:1px solid #ccc}
.ui-box-content{padding:10px}

上面是原有的box的css，这边把浮动清除内置在box模型中，只是这边的代码出现错误。
.ui-box{*zoom:1; }
.ui-box:after{...}
将box模型浮动清除，而box的子元素ui-box-head并没有ui-box-container浮动属性，
而没有对ui-box-head清除浮动，
把上面ui-box-head中的height：16px；改为height：auto可以看到ui-box-head并没有因为子元素的高度进行扩展。
根据一丝文章中的内容ui-box-head中也没有设置清除浮动的 overflow：hidden，overflow：auto 和浮动属性。
所以我认为这边的浮动清除出现错误。
正确的代码应该是

.ui-box{border:1px solid #ccc;zoom:1;font-size:12px;margin:0;padding:0;border-bottom:0}
.ui-box-follow{border-top:0}
.ui-box-head{border-bottom:1px solid #ccc;position:relative;padding:10px;height:16px;line-height:16px;
background:-webkit-gradient(linear,left top,left bottom,from(#fcfcfc),to(#f9f9f9));
background:-moz-linear-gradient(top,#fcfcfc,#f9f9f9);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f9f9f9');
background:-o-linear-gradient(top,#fcfcfc,#f9f9f9);background:linear-gradient(top,#fcfcfc,#f9f9f9);zoom:1}
.ui-box-head:after{clear:both;content:" ";display:block;font-size:0;height:0;visibility:hidden}
.ui-box-head .ui-box-head-title{color:#656565;font-size:14px;font-weight:700;float:left;display:inline;margin:0;padding:0}
.ui-box-head .ui-box-head-more{float:right}
.ui-box-head .ui-box-head-text{margin-left:10px;color:gray;float:left}
.ui-box-container{background:#fff;border-bottom:1px solid #ccc}
.ui-box-content{padding:10px}

去掉.ui-box-head中的height更好。