以前采用浮动之后,加一个clear:both标签来撑开父层,总觉得不爽,写起来也麻烦,其实可以采用另外的方式 <无>
<div class="content"> <div class="left"></div> <div class="right"> </div> <div style="clear:both;"></div> </div>
<div class="clearfix"> <div class="left"></div> <div class="right"> </div> </div>
.clearfix:after { /*在类名为“clearfix”的元素内最后面加入内容;*/ content: "."; /*内容为“.”就是一个英文的句号而已。也可以不写。*/ display: block; /*加入的这个元素转换为块级元素。*/ clear: both; /*清除左右两边浮动。*/ visibility: hidden; /*可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;*/ line-height: 0; /*行高为0;*/ height: 0; /*高度为0;*/ font-size:0; /*字体大小为0;*/ } .clearfix { *zoom:1;} /*这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。*/