.clearfix:after(消除波动)中各个特性及值详尽解說

日期:2021-03-09 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

下列编码能够这么解释:

拷贝编码
编码以下:

.clearfix:after { <----在类名为“clearfix”的元素内最终面添加內容;
content: "."; <----內容为“.”便是1个英文的句号罢了。还可以不写。
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%实际效果也是1样。

整段编码就非常于在波动元素后边跟了个宽高为0的空div,随后设置它clear:both来做到消除波动的实际效果。
之因此用它,是由于,你无须在html文档中写入很多不经意义的空标识,又能消除波动。

话说回家,你这段编码简直个累坠啊,这样写不好于维护保养。
要是写1个.clearfix就可以了,随后在必须清波动的元素中 加上clearfix类名就行了。
如:

拷贝编码
编码以下:

<div class="head clearfix"></div>