Heim >Web-Frontend >HTML-Tutorial >利用伪对象选择器E:after实现清除浮动效果_html/css_WEB-ITnose
利用伪对象选择器E:after实现清除浮动效果_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:28:422031Durchsuche
利用伪对象选择器E:after实现清除浮动效果:
关于清除浮动已经是老生畅谈的问题，文章实在是太多了，几乎已经被谈烂了。
这当然是因为浮动是不居中必须要用到的技巧，那么清除浮动自然也是必须的，但是本章节还是要啰嗦一下，再次介绍一下清除浮动的方法的一种，因为它会用到之前比较少见的伪对象选择器，希望能够引起大家的注意。
先看一段代码实例:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><head><style type="text/css">#box{ width:300px; margin:0px auto; border:5px solid red;}#box .left{ width:80px; height:50px; background:green; float:left; margin-left:10px;}#box .clear{clear:both}</style></head><body><div id="box"> <div class="left"></div> <div class="left"></div> <div class="left"></div> <div class="clear"></div></div></body></html> 上面的代码是一个普通的清除浮动的代码，虽然能够实现清除浮动的功能，但是并不够完美，因为会多出一个div标签来，这样会增加浏览器解读的压力，页面不够清爽，那么就使用伪对象选择器进行一下改造，代码如下:
<!DOCTYPE html><html><head><meta charset=" utf-8"><meta name="author" content="http://www.softwhy.com/" /><title>蚂蚁部落</title><head><style type="text/css">#box{ width:300px; margin:0px auto; border:5px solid red; zoom:1;}#box .left{ width:80px; height:50px; background:green; float:left; margin-left:10px;}.clearfix{*zoom:1;}.clearfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:both; } </style></head><body><div id="box" class="clearfix"> <div class="left"></div> <div class="left"></div> <div class="left"></div></div></body></html> 上面的代码中，利用:after伪对象选择器，创建一个伪元素，然后给这个伪元素设置设置内容为一个点，同时设置为块级元素和clear:both这样就实现了清除浮动的效果。
相关阅读:
1.清除浮动可以参阅css清除浮动的方式汇总一章节。
2.E:after可以参阅CSS的伪对象选择符E:after/E::after一章节。
原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=15391
更多内容可以参阅:http://www.softwhy.com/divcss/
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS3 边框（Borders）_html/css_WEB-ITnoseNächster Artikel：使用HTML 和CSS 开发商业站点_html/css_WEB-ITnose