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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • mac idea 激活码_最新在线免费激活

    (mac idea 激活码)本文适用于JetBrains家族所有ide,包括IntelliJidea,phpstorm,webstorm,pycharm,datagrip等。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月30日
    185
  • idea上git提交忽略部分目录

    idea上git提交忽略部分目录idea上git提交忽略部分目录

    2022年4月24日
    249
  • java flowable工作流_flowable工作流免费视频

    java flowable工作流_flowable工作流免费视频1.2基本操作1.2.1编码准备这里一官网请假流程案例为例resources目录下新建一个holiday-request.bpmn20.xml文件1.2.2初始化DB运行脚本后会初始化相关表,后面一点点介绍查看act_re_deployment表查看act_ge_bytearray,记录xml文本字节数组,通过deployment_id关联,查看相关的api有列表查询、分页查询等1.2.4发起流程修改holiday-request.bpmn2

    2025年7月11日
    3
  • file_get_contents(“php://input”)的使用方法

    file_get_contents(“php://input”)的使用方法

    2021年10月11日
    103
  • Vue的跨域解决方案

    Vue的跨域解决方案如何在vue里面优雅的解决跨域,路由冲突问题?当我们在路由里面配置成一下代理可以解决跨域问题:proxyTable:{‘/goods/*’:{target:’http://localhost:3000′},’/user/*’:{ target:’http://ocalhost:3000′}},这种配置方式在一定程度上解决了跨…

    2022年10月1日
    2
  • 银行的大数据应用

    银行的大数据应用这是系列文章之一。本系列梳理了国内外银行信息化历程,包含区块链、云计算、物联网、移动端、人工智能各方面的应用情况。一、大数据发展简介“大数据”一词据称最早于1980年出现在美国著名未来学家阿尔文·托夫勒所著的《第三次浪潮》一书中,他在书中将“大数据”称为“第三次浪潮的华彩乐章”。在笔者看来,大数据的应用效果主要取决于两部分,一是大数据的技术部分,二是对数据质量和价值有重要影响的数据治理…

    2022年5月29日
    60

发表回复

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

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