浅谈CSS中的clear清除浮动

风,从水中掠过,留下粼粼波纹;阳光,从云中穿过,留下丝丝温暖;岁月,从树林中走过,留下圈圈年轮。

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

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

left:不允许左边有浮动。

right:不允许右边有浮动。

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

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

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

XML/HTML Code复制内容到剪贴板
  1. <styletype="text/css">
  2. div{
  3. border:1pxsolidred;
  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. <body>
  34. <divid="msg_Div">
  35. <divclass="one"></div>
  36. <divclass="two"></div>
  37. <divclass="three"></div>
  38. <divclass="four"></div>
  39. <divclass="five"></div>
  40. </div>
  41. </body>

效果:

   

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

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例