overflow:auto清除浮动

overflow:auto清除浮动

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

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

这在以前也发表过很多:

https://www.html.cn/article.asp?id=416

https://www.html.cn/article.asp?id=316

今天看一个FF下的问题,看源码:

?

CSS代码
  1. <style?type=“text/css”> ??
  2. <!– ??
  3. 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} ??
  4. body{font:400?12px?Tahoma,SimSun,Arial;color:#333333;background-color:#fff;?} ??
  5. ul,li{list-style:none} ??
  6. .ym_n{?border:#dbdbdb?1px?solid;?height:220px;?margin:0?auto;?background:#FFFFFF;?width:256px;} ??
  7. .ym_n?.so1{?padding:9px?10px;?height:21px;} ??
  8. .yma{?width:118px;?height:17px} ??
  9. .ymsoa{?vertical-align:middle;*vertical-align:-1px;?margin-left:3px} ??
  10. .ym_n?.so2{?padding:15px?10px?9px;?height:21px;} ??
  11. .ym_n?ul{?width:222px;??margin:0?auto;??} ??
  12. .ym_n?li{?height:25px;?width:74px;?float:left;?line-height:25px} ??
  13. .ym_n?li.red{?color:#FF0000;?font-weight:700} ??
  14. –> ??
  15. </style>??

?

XML/HTML代码
  1. <div?class=“ym_n”>??
  2. <div?class=“so1”>WWW.<input?id=“yma”?class=“yma”?type=“text”?name=“”?/><input?type=“submit”?class=“ymsoa”?name=“button”?id=“button”?value=“提交”?/>??
  3. ??</div>??
  4. <ul>??
  5. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  6. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com.cn</label></li>??
  7. ????????<li?class=“red”><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.cn</label></li>??
  8. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  9. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label>??
  10. ????????</li>??
  11. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  12. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  13. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  14. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  15. ??</ul>??
  16. ??<div?class=“so2”>WWW.<input?id=“yma”?class=“yma”?type=“text”?name=“”?/><input?type=“submit”?class=“ymsoa”?name=“button2”?id=“button2”?value=“提交”?/></div>??
  17. ????<ul>??
  18. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  19. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com.cn</label></li>??
  20. ????????<li?class=“red”><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.cn</label></li>??
  21. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  22. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  23. ????????<li><label?for=“”><input?name=“”?type=“checkbox”?value=“”?/>.com</label></li>??
  24. ????</ul>??
  25. </div>??

转载注明:https://www.html.cn/article.asp?id=502

在FF显示:

见DEMO:https://www.html.cn/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.html.cn/demo/overflow/overflow2.html

=======================================================================================

另:使用overflow:auto清除浮动,Firefox会产生focus,见

http://www.aoao.org.cn/blog/2007/05/firefox-overflow-auto/

赞(0) 打赏
未经允许不得转载:WEB前端开发 » overflow:auto清除浮动

评论 1

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    文中的两个链接都失效了。

    Lynn8年前 (2011-01-18)回复

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏