网页制作 
首页 > 网页制作 > 浏览文章

浅谈CSS中的clear清除浮动

(编辑:jimmy 日期: 2024/11/27 浏览:3 次 )

1、CSS中的clear有四个参数:

none:允许两边都可以浮动。

left:不允许左边有浮动。

right:不允许右边有浮动。

both(默认);不允许有浮动。

2、一开始在CSS中clear浮动是默认both,也就是说一开始不能有浮动的。

3、使用的案例:假设我清除第三个DIV的浮动

XML/HTML Code复制内容到剪贴板
  1. <style type="text/css">  
  2. div{   
  3. border:1px solid red;   
  4. float:left;   
  5. clear:none;   
  6. }   
  7. #msg_Div{   
  8. width:600px;   
  9. height:600px;   
  10. }   
  11. .one{   
  12. width:100px;   
  13. height:90px;   
  14. }   
  15. .two{   
  16. width:100px;   
  17. height:90px;   
  18. }   
  19. .three{   
  20. width:100px;   
  21. height:90px;   
  22. clear:left;   
  23. }   
  24. .four{   
  25. width:100px;   
  26. height:90px;   
  27. }   
  28. .five{   
  29. width:100px;   
  30. height:90px;   
  31. }   
  32. </style>  
  33.   
  34.     
  35.   
  36. <body>  
  37. <div id="msg_Div">  
  38. <div class="one"></div>  
  39. <div class="two"></div>  
  40. <div class="three"></div>  
  41. <div class="four"></div>  
  42. <div class="five"></div>  
  43. </div>  
  44. </body>  

效果:

   浅谈CSS中的clear清除浮动

以上这篇浅谈CSS中的clear清除浮动就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:浅析css3中matrix函数的使用
下一篇:CSS在固定宽高的div内实现垂直居中的实例详解
友情链接:杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 网站地图 SiteMap