overflow:auto清除浮动

时间：2009年03月26日作者：愚人码头查看次数:6,537 views评论次数：1

overflow:auto清除浮动

overflow:auto在css手册中的解释：必需时对象内容才会被裁切或显示滚动条！

其实overflow:auto可以用来清除浮动

这在以前也发表过很多：

http://www.css88.com/article.asp?id=416

http://www.css88.com/article.asp?id=316

今天看一个FF下的问题，看源码：

CSS代码

<style type=“text/css”>
<!–
body,dl,dt,dd,ul,ol,li,pre,form,fieldset,input,p,blockquote,th,td,h1,h2,h3,h4,h4,h5{margin:0;padding:0}
body{font:400 12px Tahoma,SimSun,Arial;color:#333333;background-color:#fff; }
ul,li{list-style:none}
.ym_n{ border:#dbdbdb 1px solid; height:220px; margin:0 auto; background:#FFFFFF; width:256px;}
.ym_n .so1{ padding:9px 10px; height:21px;}
.yma{ width:118px; height:17px}
.ymsoa{ vertical-align:middle;*vertical-align:-1px; margin-left:3px}
.ym_n .so2{ padding:15px 10px 9px; height:21px;}
.ym_n ul{ width:222px; margin:0 auto; }
.ym_n li{ height:25px; width:74px; float:left; line-height:25px}
.ym_n li.red{ color:#FF0000; font-weight:700}
–>
</style>

XML/HTML代码

<div class=“ym_n”>
<div class=“so1″>WWW.<input id=“yma” class=“yma” type=“text” name=“” /><input type=“submit” class=“ymsoa” name=“button” id=“button” value=“提交” />
</div>
<ul>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com.cn</label></li>
<li class=“red”><label for=“”><input name=“” type=“checkbox” value=“” />.cn</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label>
</li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
</ul>
<div class=“so2″>WWW.<input id=“yma” class=“yma” type=“text” name=“” /><input type=“submit” class=“ymsoa” name=“button2″ id=“button2″ value=“提交” /></div>
<ul>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com.cn</label></li>
<li class=“red”><label for=“”><input name=“” type=“checkbox” value=“” />.cn</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
<li><label for=“”><input name=“” type=“checkbox” value=“” />.com</label></li>
</ul>
</div>