Heim > Web-Frontend > HTML-Tutorial > 清除浮动解决方案_html/css_WEB-ITnose

清除浮动解决方案_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-21 08:49:45
Original
1277 Leute haben es durchsucht

偶然看到一篇文章,发现自己和所在项目清除浮动的方式以及落伍,特此整理。

空标签大法

按照方法从旧到新的顺序来说,最老的应该就是空标签大法了,通过给空标签添加css:

.clear{clear:both;line-height:0;}
Nach dem Login kopieren

来清除浮动。这种做法如果在页面复杂的布局要经常清楚浮动的时候就会产生很多的空标签,增加了页面无用标签,不利于页面优化。

after大法

后来出现了利用after伪元素的方式:

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0; } .clearfix{*zoom:1;}
Nach dem Login kopieren

优化after

上面的方法还是太麻烦了,有人推出更简便的方法:

.clearfix:after {     content:"200B";     display:block;     height:0;     clear:both; } .clearfix {*zoom:1;}/*IE/7/6*/
Nach dem Login kopieren

这里的200B,是一个零宽度空格,这样就不用 visibility:hidden了。

极精简法

还有一种极度精简法:

.clearfix:before,.clearfix:after{     content:"";     display:table; } .clearfix:after{clear:both;} .clearfix{     *zoom:1;/*IE/7/6*/ }
Nach dem Login kopieren

后面说到的两种方法都比较精简,可以用在项目工程中。

感悟

想起老师和我说过一句话,css是一笔一笔画出来的。唉…

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage