> 웹 프론트엔드 > HTML 튜토리얼 > 清除浮动解决方案_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-21 08:49:45
원래의
1277명이 탐색했습니다.

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

空标签大法

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

.clear{clear:both;line-height:0;}
로그인 후 복사

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

after大法

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

.clearfix:after {     visibility: hidden;     display: block;     font-size: 0;     content: " ";     clear: both;     height: 0; } .clearfix{*zoom:1;}
로그인 후 복사

优化after

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

.clearfix:after {     content:"200B";     display:block;     height:0;     clear:both; } .clearfix {*zoom:1;}/*IE/7/6*/
로그인 후 복사

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

极精简法

还有一种极度精简法:

.clearfix:before,.clearfix:after{     content:"";     display:table; } .clearfix:after{clear:both;} .clearfix{     *zoom:1;/*IE/7/6*/ }
로그인 후 복사

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

感悟

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿