风吹起如花般破碎的流年，而你的笑容摇晃摇晃，成为我命途中最美的点缀!
Php爱好者新版上线啦！
-12 26

CSS清除浮动常用方法小结 clear:both

Category:div+css View: Author:燕子

        今天写这篇文章主要是因为几个美工给我的页面在清除浮动的时候都出了同一个问题，老是喜欢把清除浮动不紧挨着被浮动的元素写，而是写在离他几百米远的地方，这样根本就没有起到清除浮动的作用。因为他们给我的都是这样的，我还以为是我自己搞错了，然后就在网上看了资料，事实证明是他们错了。少废话，来具体看下到底该如何清除浮动。
        看了有一篇文章，清除浮动有三种方法，不过好像大家经常用的就是clear：both这种了。
        给大家想看下没有清除浮动的效果：

XML/HTML代码
  1. <style type=”text/css”>  
  2. <!–   
  3. *{margin:0;padding:0;}   
  4. body{font:36px bold; color:#F00; text-align:center;}   
  5. #layout{background:#FF9;}   
  6. #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}   
  7. #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}   
  8. –>  
  9. </style>  
  10. <div id=”layout”>  
  11. <div id=”left”>Left</div>  
  12. <div id=”right”>Right</div>  
  13. </div>  

大家看下这段代码，给class=layout这个div是加了背景颜色的，但是当大家运行该代码的时候，却么有看到背景，而是必须给这个div写一个规定的高度才会出现，那么是为啥呢，就是因为他里面的两个div浮动过，但是却没有清除浮动。

XML/HTML代码
  1. <style type=”text/css”>  
  2. <!–   
  3. *{margin:0;padding:0;}   
  4. body{font:36px bold; color:#F00; text-align:center;}   
  5. #layout{background:#FF9;}   
  6. #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}   
  7. #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}   
  8. .clr{clear:both;}   
  9. –>  
  10. </style>  
  11. <div id=”layout”>  
  12. <div id=”left”>Left</div>  
  13. <div id=”right”>Right</div>  
  14. <p class=”clr”> </p>  
  15. </div>  

在看看上面这段代码。在被浮动的最后一个元素下面清除了浮动，运行时发现他有背景了

XML/HTML代码
  1. <style type="text/css">  
  2. <!–   
  3. *{margin:0;padding:0;}   
  4. body{font:36px bold; color:#F00; text-align:center;}   
  5. #layout{background:#FF9;}   
  6. #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}   
  7. #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}   
  8. .clr{clear:both;}   
  9. –>  
  10. </style>  
  11. <div id="layout">  
  12. <div id="left">Left</div>  
  13. <div id="right">Right</div>  
  14. </div>  
  15. <p class="clr"> </p>  

在看看这段代码，没有把清除浮动写在了被浮动的最后一个元素的后面，结果和第一个没写清除浮动的效果是一样的。
所以在有浮动的元素的时候一定要清除浮动，并且清除浮动一定要写在被浮动的最后一个元素的后面，要不然也是起不到任何作用的。


本文来源于php爱好者：php教程 —http://www.phplover.cn/
原文地址：http://www.phplover.cn/post/450.html

div  css   评论(11)

相关文章:

  • 评论(11)
发表评论 TrackBack

发表评论

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。