清除浮动的最佳方法(页 1) - 网站建设 - 我爱电脑技术论坛打造最好的电脑自学交流论坛

star2008 发表于 2008-5-9 16:22

清除浮动的最佳方法

　　 2O:@7W6C#[
在CSS森林群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动，嘿嘿，这个方法不单使用简单，而且FF、OP、IE7都支持，从此可以告别那又长兼容性又差的FF清浮动的方法了。%^J9nCS2WY

方法真的很简单，只要为需要清浮动的标签加上overflow这个属性。

CSS代码/D`{ x+}&L%y1p~3k

ul{
list-style:none;z2Z lrPe%~
height:auto;
margin:0;p,hp})gE*skL,qO
adding:0;
background-color:#436973;
}0Jsr4y_?Kg
li{
float:left;
width:80px;+nLIve N2J%o
height:80px;%JX5s*xS7ae
background-color:#83B1DF;
}
.demo{O1P;Eq+D$O
clear:both;3Xk"d sq7F
border:1px solid #FF00FF;
margin-bottom:5px;2u&l1K7T4?V[G
}w3LTFm^'~}
.overflow{3P8KjD-k
overflow:auto;
zoom:1; N(|S7TYYc"YFSJ8DH
background-color:#43FF73;t%Z6r/P\2r$a%bM
}
ul{
list-style:none;!HX)Q$x }Z.f8k
height:auto;
margin:0;4_2V:T-of
padding:0;} j:qK!G"u G9vo
background-color:#436973;
}
li{
float:left;
width:80px;
height:80px;
background-color:#83B1DF;
}'{)jO)^,[7Hf4D@
.demo{.C y0N1_0|m7_|GM
clear:both;
border:1px solid #FF00FF;3H[sv1DA
margin-bottom:5px;
}1C$JHm.QjE
.overflow{ jQv~[
overflow:auto;L_0K2E9u*d(y\
zoom:1;.cY@]UL _Gz:b`
background-color:#43FF73;
}
^;Zz Nll
HTML代码
)]#t*nM:Ca"_.t)\
<div class="demo">
<ul class="overflow">^5D!VP/V(`8LBkgy
<li>1</li>
<li>2</li>2fy&m8x0D%tY
<li>3</li>
<li>4</li>0]sq&D3C]D,I2s*v
<li>5</li>
<li>6</li>}X!a Qs1R
<li>7</li>
<li>8</li>:o;d@%n5B+]_7@i4M F
<li>9</li>"M-e9v%ZI GN
</ul>#v6I I)UoY2u
</div> P%kM^%ub_&f
<div class="demo">
<ul>
<li>1</li>
<li>2</li>)Z"Z0w"?(TXa}r,j2w
<li>3</li>Gv'Z(MMG"K0nY
<li>4</li>
<li>5</li>B`-xS2i c.SS
<li>6</li>
<li>7</li>uq\2L:L e'@c8\
<li>8</li>
<li>9</li>
</ul>
</div>5A;Q%se K

其中zoom是为了IE6准备的。q!C|sf2I1u&Fsr

完整的Demo
X(m;d.Ji!]C2s
注：忘了一个很重要的内容，并不是所有的overflow属性都可起来一样的效果，比如visible属性就只能对IE起作用。例子可以看这里Demo2
这样的话就有一个问题啦，如果要有高度，而且内容超出高度的时候，定义auto或hidden都可能会有一些不想要的效果出现。这里提供一个解决方案：对于IE6及以下版本的IE，可以直接定义高度；对于IE7、FF、OP，可定义min-height。

CSS代码q@ Ivmm$R(Q,n3JKX

overflow
{
height:auto;
_height:200px;A9N[[6rJVG
min-height:200px;
verflow:auto;n!i`;FHP&A(|
zoom:1;
_overflow:visible;
}

页: [1]

我爱电脑技术论坛's Archiver

清除浮动的最佳方法