我目前已知的清除浮动的方法大概有3种

首先是HTML结构:

<div id="warbox" class="clearfix">
    <div id="left"&gt;Left</div>
    <div id="right"&gt;Right</div>
</div&gt;

然后是CSS代码:

.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* <a href="http://liuxiaofan.com/" title="html">html</a> .clearfix { height: 1%;zoom:1; }
.clearfix { display: block; }
/* End hide from IE-mac */


基本清除浮动的原理(3种方法):

  • warbox这个容器的子元素如果有浮动的话,那么它后面的div就不会正常的向下排列,因为会受到它子元素的宽度和高度的影响,如果不考虑到兼容性问题,最简单的方法就是在warbox后面插入一个div然后样式设置clear:both;就可以了。这种方法已经淘汰了,以为html结构有影响,你会发现有n个clear的div出现;
  • 当然现在也有人喜欢用overflow:hidden;来清楚浮动,我非常不建议这样做,因为子元素超出部分被隐藏掉了,在某些情况下必定会有一定的影响,比如css3的阴影box-shandow就不会正常显示;所以为什么我说clearfix才是主流;
  • 那么clearfix的原理其实也是这样的,只不过用了一些小方法,比如:after
    :after的意思就是在此元素后面添加一个元素,里面的样式就是后面元素的样式,相当于在warbox后面插入一个div;如果不考虑兼容性和美观性问题的话只需要这样写就可以了

    .clearfix:after {
    clear: both;
    }

    那么为什么里面那么多代码呢,我们一句一句分析就知道了
    visibility: hidden; 隐藏,为了美观当然要隐藏掉这个元素了
    display: block; 块级方式,如果不设置的话有的浏览器默认display的属性不是block,比如ie6
    font-size: 0;content: ” “;height: 0; 这些为了把高度去掉,不然浏览器会给空白字符留高度的
    height: 1%;zoom:1; 这个主要就是针对ie6了 尤其是zoom:1可以把div变成haslayout属性,关于zoom:1和haslayout这2个概念我会再写一篇博客详细介绍,现在可以简单的理解成为块级元素吧;

不过用不了多久ie6淘汰掉的时候我们的css代码也就用不了这么多了,也不会有那么多无聊的人喜欢专门挑一些不符合w3c标准的方法去测试你的css技术掌握程度和显示自己有多牛B了。期待那一天吧!

转载请注明来自:爱前端

发表评论

电子邮件地址不会被公开。 必填项已用*标注