清除浮动解决方案_html/css

来源：动视网责编：小采时间：2020-11-27 16:39:25

清除浮动解决方案_html/css

清除浮动解决方案_html/css_WEB-ITnose:偶然看到一篇文章，发现自己和所在项目清除浮动的方式以及落伍，特此整理。空标签大法按照方法从旧到新的顺序来说，最老的应该就是空标签大法了，通过给空标签添加css： .clear{clear:both;line-height:0;} 来清除浮动。这种做法如果在页面复杂的

推荐度：

点击下载本文 文档为doc格式

导读清除浮动解决方案_html/css_WEB-ITnose:偶然看到一篇文章，发现自己和所在项目清除浮动的方式以及落伍，特此整理。空标签大法按照方法从旧到新的顺序来说，最老的应该就是空标签大法了，通过给空标签添加css： .clear{clear:both;line-height:0;} 来清除浮动。这种做法如果在页面复杂的

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

空标签大法

按照方法从旧到新的顺序来说，最老的应该就是空标签大法了，通过给空标签添加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是一笔一笔画出来的。唉…

清除浮动解决方案_html/css

推荐度：

点击下载本文 文档为doc格式

标签：清除解决方案 css

热门焦点

清除浮动解决方案_html/css

清除浮动解决方案_html/css

空标签大法

after大法

优化after

极精简法

感悟

清除浮动解决方案_html/css

最新推荐

猜你喜欢

热门推荐