脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

浅谈CSS中的clear清除浮动

  发布时间：2016-06-06 08:52:00   作者：佚名   我要评论
下面小编就为大家带来一篇浅谈CSS中的clear清除浮动。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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浮动的三种方法小结

    这篇文章主要介绍了清除css浮动的三种方法小结,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-19

  • 详解css清除浮动float的七种常用方法总结和兼容性处理

    这篇文章主要介绍了详解css清除浮动float的七种常用方法总结和兼容性处理,非常具有实用价值，需要的朋友可以参考下
    2017-09-11

  • 浅谈css中浮动和清除浮动带来的影响

    这篇文章主要介绍了浅谈css中浮动和清除浮动带来的影响，通过代码示例和图片展示详细介绍讲解了浮动的应用和实现效果,需要的朋友可以参考下
    2017-08-14

  • CSS清除浮动方法小结

    本文主要介绍了CSS解决浮动，清除浮动的几种方法：1、设置父元素高度；2、overflow；3、增加子元素（块级），并且设置其clear属性值为both来解决（隔墙法、内墙法）；4、使
    2017-03-22

  • 详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    这篇文章主要为大家介绍了CSS中zoom属性或overflow:auto属性清除浮动的作用,文中通过实例代码介绍的很详细，相信会对大家的理解和学习具有一定的参考借鉴价值，有需要的朋
    2016-11-26

  • 关于清除浮动塌陷的几种方法总结

    在大家在使用css的过程中，多多少少会遇到清除浮动这个问题。所以这篇文章给大家总结了div+css中关于清除浮动塌陷的4种方法，相信会对大家学习或者使用div+css能有所帮助，
    2016-10-17

  • CSS清除浮动的方法详解

    这篇文章主要介绍了CSS清除浮动的方法详解,值得注意的是并不是每次单纯把浮动清除掉就可以解决相关问题,文中最后谈到的闭合浮动的方案也非常值得一试,需要的朋友可以参考下
    2016-05-30

  • CSS浮动所产生的内容溢出问题及清除浮动的方法小结

    CSS的float浮动效果在一些情况下非常不稳定,控制不好的时候一般还是清除浮动为妙,这里我们就来看一下CSS浮动所差生的内容溢出问题及清除浮动的方法小结
    2016-05-30

  • DIV+CSS 清除浮动常用方法总结

    下面小编就为大家带来一篇DIV+CSS 清除浮动常用方法总结。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-06

  • Css实现清除浮动的方法汇总

    这篇文章主要介绍了Css实现清除浮动的方法汇总,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-07-11

最新评论

关注微信公众号

扫一扫