浅谈CSS中的clear清除浮动

前端  /  管理员 发布于 7年前   212

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清除浮动就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。


  • 上一条：
    浅析css3中matrix函数的使用
    下一条：
    使用CSS的border属性构建变形边框的方法总结

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客