overflow:auto清除浮动
overflow:auto在css手册中的解释:必需时对象内容才会被裁切或显示滚动条!
其实overflow:auto可以用来清除浮动
这在以前也发表过很多:
https://www.7psus5.com/article.asp?id=416
https://www.7psus5.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>??
转载注明:https://www.7psus5.com/article.asp?id=502
在FF显示:
见DEMO:https://www.7psus5.com/demo/overflow/overflow1.html
只要把样式中
.ym_n?ul{?width:222px;??margin:0?auto;??} 改写成.ym_n?ul{?width:222px;??margin:0?auto;??overflow:auto?}
就正常了
见DEMO:https://www.7psus5.com/demo/overflow/overflow2.html
=======================================================================================
另:使用overflow:auto清除浮动,Firefox会产生focus,见
文中的两个链接都失效了。