[关闭]
@Rico 2014-08-01T16:25:18.000000Z 字数 8314 阅读 4334

CSS overflow 及其如何去除浮动

CSS

问：
今天突然发现overflow:hidden这个能清除浮动，想知道overflow:hidden到底这个属性做了哪些动作，竟然能够清除浮动，解析的时候到底是怎样解析的...

答：
是因为overflow（除了visible)会重新给他里面的元素建立块级格式化(block formatting context)
floats, position absolute, inline-block, table-cell和table-caption都不是块级样式，所以才会用到clear来控制浮动
overflow也可以清除浮动是因为当在父级元素设置overflow时候，除了visible，就是只有auto, hidden或者scroll时候，也会建立新的块级格式给他的子元素, 从而起到清楚浮动效果
虽然clear是旧的方式，但还是推荐用clear来做，有些情况会比overflow处理的要好

CSS overflow 属性

实例
设置 overflow 属性：

  1. div
  2.   {
  3.   width:150px;
  4.   height:150px;
  5.   overflow:scroll;
  6.   }

浏览器支持
所有主流浏览器都支持 overflow 属性。
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。
定义和用法
overflow 属性规定当内容溢出元素框时发生的事情。
说明
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
pic
可能的值
pic

CSS: 清除浮动－使用:Overflow

什么是CSS清除浮动？
网络上流行的说法是：在非IE浏览器（如Firefox）下，当容器的高度（height）为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

下面的演示中显示的浮动子元素在父容器高度不自动适应的问题 。为了解决这个问题，您可以简单地添加CSS属性overflow:auto (or overflow:hidden)的包装容器。这也许是最简单的方法来清除浮动。
pic
第一段
HTML

  1. <div class="container-without-overflow">
  2.     <div class="box">
  3.         <p>Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</p>
  4.     </div>
  5.     <div class="box">
  6.         <p>Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla.</p>
  7.     </div>
  8. </div>

CSS

  1. .box {
  2.     background: #cbd4d9;
  3.     width: 400px;
  4.     margin-right: 10px;
  5.     padding: 10px 20px;
  6.     float: left;
  7. }
  8. .container-without-overflow {
  9.     background: #e6eef2;
  10.     border: solid 1px #999;
  11.     padding: 10px;
  12. }

pic
当把.box的float:left去掉之后就是这样了
pic
说明的确是float的问题
第二段
HTML

  1. <div class="container-without-overflow">
  2.     <div class="box">
  3.         <p>Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</p>
  4.     </div>
  5.     <div class="box">
  6.         <p>Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla.</p>
  7.     </div>
  8.     <div style="clear:both">&lt;div style="clear:both"&gt;&lt;/div&gt;</div>
  9. </div>

CSS同上
这里额外加了个div用于清除浮动
如果父div是float：left，而子div没有float就会产生父div没有高度问题，子div无法撑开父div，加入清除浮动，子div就可以撑开父div
具体放的位置就是 父div的结束前

  1. <div id="父div">
  2. <div id="子div">
  3. 内容
  4. </div>
  5. <div class="clearfloat"></div>
  6. </div>

第三段
HTML

  1. <div class="container">
  2.     <div class="box">
  3.         <p>Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</p>
  4.     </div>
  5.     <div class="box">
  6.         <p>Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla.</p>
  7.     </div>
  8. </div>

CSS

  1. .container {
  2.     background: #e6eef2;
  3.     border: solid 1px #999;
  4.     padding: 10px;
  5.     overflow: auto;
  6. }
  7. .box {
  8.     background: #cbd4d9;
  9.     width: 400px;
  10.     margin-right: 10px;
  11.     padding: 10px 20px;
  12.     float: left;
  13. }

缺点
虽然它是一个很好的的技巧，也有一些弊端：

HTML

  1. <div class="container">
  2.     <div class="box">
  3.         <p>Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</p>
  4.     </div>
  5.     <div class="box">
  6.         <p>Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla. <img src="http://www.bzjg.com.cn/img/bannerpic/thr.jpg" alt="image"></p>
  7.         <p>http://www.webdesignerwall.com/sample/tutorials/css_clearing_floats_with_overflow</p>
  8.     </div>
  9. </div>

CSS

  1. .container {
  2.     background: #e6eef2;
  3.     border: solid 1px #999;
  4.     padding: 10px;
  5.     overflow: auto;
  6. }
  7. .box {
  8.     background: #cbd4d9;
  9.     width: 400px;
  10.     margin-right: 10px;
  11.     padding: 10px 20px;
  12.     float: left;
  13. }

pic

Word-wrap
为了解决大文本问题，只需添加 word-wrap:break-word 到容器，这将迫使文本换行到一个新的行。
CSS

  1. .container {
  2.     word-wrap: break-word;
  3. }

Max-width
为了防止图像扩大超出容器边界，添加的max-width:100%，它会调整图像的大小符合容器的最大宽度。

  1. .container img {
  2.     max-width: 100%;
  3.     height: auto;
  4. }

HTML

  1. <div class="container fixed">
  2.     <div class="box">
  3.         <p>Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</p>
  4.     </div>
  5.     <div class="box">
  6.         <p>Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla. <img src="http://www.bzjg.com.cn/img/bannerpic/thr.jpg" alt="image"></p>
  7.         <p>http://www.webdesignerwall.com/sample/tutorials/css_clearing_floats_with_overflow</p>
  8.     </div>
  9. </div>

CSS

  1. .container {
  2.     background: #e6eef2;
  3.     border: solid 1px #999;
  4.     padding: 10px;
  5.     overflow: auto;
  6. }
  7. .box {
  8.     background: #cbd4d9;
  9.     width: 400px;
  10.     margin-right: 10px;
  11.     padding: 10px 20px;
  12.     float: left;
  13. }
  15. .container.fixed {
  16.     word-wrap: break-word;
  17. }
  18. .container.fixed img {
  19.     max-width: 100%;
  20.     height: auto;
  21. }

pic

完整HTML

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  4. <title>CSS: Clear Float Drawbacks</title>
  6. <style type="text/css">
  7. body {
  8.     font: .9em/150% Arial, Helvetica, sans-serif;
  9.     margin: 30px auto;
  10.     width: 960px;
  11. }
  12. p {
  13.     margin: 0 0 1em;
  14. }
  15. h2 {
  16.     font: bold 22px/110% Arial, Helvetica, sans-serif;
  17.     margin: 20px 0 0;
  18.     padding: 20px 0;
  19.     clear: both;
  20. }
  21. h3 {
  22.     font: bold 16px/120% Arial, Helvetica, sans-serif;
  23.     margin: 0 0 5px;
  24. }
  25. .credits {  
  26.     border-bottom: solid 2px #000;
  27.     padding-bottom: 10px;
  28. }
  30. /* with overflow */
  31. .container {
  32.     background: #e6eef2;
  33.     border: solid 1px #999;
  34.     padding: 10px;
  35.     overflow: auto;
  36. }
  37. .box {
  38.     background: #cbd4d9;
  39.     width: 400px;
  40.     margin-right: 10px;
  41.     padding: 10px 20px;
  42.     float: left;
  43. }
  45. /* fixed scrollbar */
  46. .container.fixed {
  47.     word-wrap: break-word;
  48. }
  49. .container.fixed img {
  50.     max-width: 100%;
  51.     height: auto;
  52. }
  54. </style>
  55. </head>
  57. <body>
  58. <h2>Drawbacks: scrollbar</h2>
  59. <div class="container">
  60.     <div class="box">
  61.         <p>Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</p>
  62.     </div>
  63.     <div class="box">
  64.         <p>Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla. <img src="http://www.bzjg.com.cn/img/bannerpic/thr.jpg" alt="image"></p>
  65.         <p>http://www.webdesignerwall.com/sample/tutorials/css_clearing_floats_with_overflow</p>
  66.     </div>
  67. </div>
  69. <h2>Solution: add max-width:100% to img and word-wrap:break-word to container</h2>
  70. <div class="container fixed">
  71.     <div class="box">
  72.         <p>Curabitur venenatis vehicula mattis. Nunc eleifend consectetur odio sit amet viverra. Ut euismod ligula eu tellus interdum mattis ac eu nulla. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui.</p>
  73.     </div>
  74.     <div class="box">
  75.         <p>Nunc eleifend consectetur odio sit amet viverra. Phasellus cursus, lacus quis convallis aliquet, dolor urna ullamcorper mi, eget dapibus velit est vitae nisi. Aliquam erat nulla, sodales at imperdiet vitae, convallis vel dui. Ut euismod ligula eu tellus interdum mattis ac eu nulla. <img src="http://www.bzjg.com.cn/img/bannerpic/thr.jpg" alt="image"></p>
  76.         <p>http://www.webdesignerwall.com/sample/tutorials/css_clearing_floats_with_overflow</p>
  77.     </div>
  78. </div>
  81. </body></html>
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注