CSS中clear的用法

CSS中clear的用法CSS中clear用法:clear有四个属性值:clear:left;right;both;none.作用:该属性指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流里的物理位置

大家好,又见面了,我是你们的朋友全栈君。

CSS中clear用法:

  clear有四个属性值: clear:left;right;both;none.

  作用:该属性指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流里的物理位置的。

  

  当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用:clear:both;来清除。

 

  下面是一个例子:

  <p class=”f1″>面朝大海</p>

  <p class=”f2″>春暖花开</p>

  <p class=”f3″>花好月圆</p>

  css定义:

  p.f1{float:left;width:100px;}

  p.f2{float:left;width:100px;}

  以上的第三行会和第一二行在一起,因为当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用:clear:both;来清除。

 

  所以我们在第三行加一个清楚float(浮动):

  css定义为:

    p.f1{float:left;width:100px;}

  p.f2{float:left;width:100px;}

  p.f3{clear:both;}

  

  

  

 

  

      

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/155601.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • APC 注入

    APC注入APC介绍APC(AsynchronousProcedureCalls,异步过程调用),APC是函数在特定的线程被异步执行。在Windows中APC是一种并发机制,用于异步的IO或

    2021年12月13日
    102
  • 解决Discuz安装时报错“该函数需要 php.ini 中 allow_url_fopen 选项开启…”

    解决Discuz安装时报错“该函数需要 php.ini 中 allow_url_fopen 选项开启…”开启php的fsockopen函数——解决DZ论坛安装问题“该函数需要php.ini中allow_url_fopen选项开启。请联系空间商,确定开启了此项功能在安装dz论坛时遇到因为fsockopen()函数问题无法进入下一步,安装错误显示“该函数需要php.ini中allow_url_fopen选项开启。请联系空间商,确定开启了此项功能”,经过分析,总结了3个解决这个…

    2022年7月21日
    17
  • webstorm正则替换(正则替换字符串)

    Command+R 进入替换页面,选择Regex,进行正则替换。参考页面https://www.jetbrains.com/help/webstorm/2016.1/regular-expression-syntax-reference.html

    2022年4月10日
    162
  • 虚拟机扩容磁盘后扩容分区_如何将磁盘主分区设置为活动分区

    虚拟机扩容磁盘后扩容分区_如何将磁盘主分区设置为活动分区当服务器数据太多的时候,硬盘不足的时候就得考虑扩容,为了不影响业务的正常运行,一般云服务器的本地磁盘都是不支持分区的,因为业务数据通常是不能中断和移动的,无论是增加硬盘或在原有磁盘增加分区的方式扩容,势必会存在卸载、挂载、移动等操作。所以对于云硬盘,如果我们要把他作为数据盘。即使能分区,也最好不要分区,以免以后扩容麻烦。以下用虚拟机看一下对未分区磁盘扩容的效果[root@k8s-node01…

    2022年8月30日
    5
  • 免费国内php空间_评测对焦速度

    免费国内php空间_评测对焦速度国外免费PHP空间终极对比,来自http://www.free-webhosts.com/php-hosting-comparison.php,http://www.free-webhosts.com是国外一家专业收集免费空间的网站,本博客以前也介绍过它:http://www.zhukun.net/blog/article.asp?id=154。其提供的免费空间数据,颇有参考价值。  此次评比

    2026年2月6日
    4
  • Laravel DB批量更新的方法

    Laravel DB批量更新的方法Laravel DB批量更新的方法

    2022年4月24日
    65

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号