如下:
1 .clearfix:after { 2 content: "."; 3 display: blcok; 4 height: 0; 5 visibility: hidden; 6 clear: both; 7 }
我想问一下display:block在这里有什么用?
将after变成块级元素,这样就能占满一行。不然别的元素就挤上来了,达不到清除浮动的效果。
正常情况下是不需要display:block的,因为div默认是block。但是,由于可能被其它样式选择器设置为其它的方式,如果inline,就导致这个作用无效了。<div class="father"><div class="cleardfix" style="float:left"></div></div>这种情况,默认情况下你的css是有效的。但是,假如你的全局有一个css是这样设定的.father > div {display:inline}。那么,就无导致你的after那个新div不是block样式,无法撑开父div,导致无效。