Heluyao's Blog » float http://www.11gz.com/blog 设计、开发路上的点点滴滴... Thu, 02 Sep 2010 07:42:29 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 利用伪类清除浮动 http://www.11gz.com/blog/2008/04/19/float-clear-pseudo-class/ http://www.11gz.com/blog/2008/04/19/float-clear-pseudo-class/#comments Sat, 19 Apr 2008 05:48:04 +0000 heluyao http://11gz-blog.528u.com/blog/?p=119 早之前就已经用过这个方法清楚浮动，但一直以来都不喜欢这样用，有点担心其兼容性。一般喜欢利用一个div元素清楚浮动，习惯问题吧，不过这样也确实简单明了！其实用这个方法也算不上很糟糕吧!偶尔也用用overflow。前段时间看了一篇关于overflow的文章，明白了这个属性要慎用，不到必要的时候还是不用为妙！结果就得出一个这样的结论，一般情况下还是利用伪类清除浮动，某些特殊的地方可以利用一个div元素来处理，尽量避免用到overflow。

下面就来讲讲“伪类清楚浮动”如何应用吧！

<style type=”text/css”>
<!–
.f1{float:left; border:1px #000000 solid; margin:2px;}
.clear:after{ content:”.”; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear{ min-height:1px;}
*html .clear{ height:1px;}
.bbc { border:3px solid #ccc; width:200px; margin:0px auto; text-align:center;}
.bbc dl { text-align:center; padding:0px; margin:0px;}
.bbc dl dt { float:left;}
.bbc dl dt dd { float:left; text-align:left; width:100px;}
.bbc ul { text-align:left; padding:0px; margin:0px;}
.bbc ul li { list-style:none; padding:0px; margin:0px;}
–>
</style>
<div class=”bbc”>
<dl class=”clear”>
<dt><img src=”1.jpg” width=”96″ height=”96″ border=”0″ alt=”" /></dt>
<dd>我和旁边的图片都是带上浮动这个武器的哦！</dd>
</dl>
<ul>
<li>我要试试clear这个家伙到底能搞定这两个带上浮动武器的家伙！</li>
</ul>
</div>

关键就在：

.clear:after{ content:”.”; display:block; height:0; font-size:0; clear:both; visibility:hidden;}
.clear{ min-height:1px;}
*html .clear{ height:1px;}

由于IE的兼容，加了后两句。给其设置了最小高度。现在差不多了吧！

这个可是一个很重要的知识点哦！

]]> http://www.11gz.com/blog/2008/04/19/float-clear-pseudo-class/feed/ 0