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


相关推荐

  • oracle最强大函数之一decode函数的使用[通俗易懂]

    oracle最强大函数之一decode函数的使用[通俗易懂]decode的几种用法1:使用decode判断字符串是否一样DECODE(value,if1,then1,if2,then2,if3,then3,…,else)含义为IF条件=值1THEN    RETURN(value1)ELSIF条件=值2THEN    RETURN(value2)    ……ELSIF条件=值nTHEN  

    2022年7月25日
    13
  • 方程推导:二阶有源带通滤波器设计!(下载:教程+原理图+视频+代码)

    方程推导:二阶有源带通滤波器设计!(下载:教程+原理图+视频+代码)1、背景对于微弱的信号的处理方式一般是:放大和滤波,这个过程中就涉及到放大电路的选取、滤波器的选择以及偏置电路的设计。本例以实例的方式讲解并附带参数计算、仿真、实物测试三个环节。假设需要处理一个20mV的正弦信号,该信号的频率范围是15~35Hz,经过处理后幅值不超过3.3V,且需要经过带通滤波器滤除杂波。2、滤波器定义滤波电路又称为滤波器,是一种选频电路,能够使特定频…

    2022年6月7日
    38
  • 微信上赚钱需要准备什么?[通俗易懂]

    微信上赚钱需要准备什么?[通俗易懂]微信上赚钱需要准备什么?1、一个风口上的产品2、微信好友人脉资源3、群发工具其实很多时候赚钱并没有那么难,想在微信上做生意、做社交其实很简单。很多人目前可能手头都有至少一个产品是可以卖的,但是他们没有有效的利用起来自己的微信人脉。也许是不会;也许是会,但是没工具不能;也许就是懒……不管出于什么原因,我这篇文章是写给想赚钱的人。加余老师VX:125381839微精灵营销工具可以帮助我们做哪些…

    2022年6月4日
    40
  • django restful API 代码自动生成_阿里restful接口规范

    django restful API 代码自动生成_阿里restful接口规范restful接口规范什么是接口规范?接口规范就是为了采用不同的后台语言,也能使用同样的接口获取到同样的数据。如何写接口:接口规范是规范化书写接口的,写接口要写url、响应数据​注:如果将请求参

    2022年7月30日
    12
  • msm8953之spi配置

    msm8953之spi配置//===========================================spi5msm8953.dtsialiases{spi5=&spi_5;};spi_5:spi@7af5000{/*BLSP1QUP5*/compatible=”qcom,spi-qup-v2″;…

    2022年10月18日
    6
  • 简单无序列表_无序列表怎么横排

    简单无序列表_无序列表怎么横排实现如下图所示的简单无序列表,并为每个列表项添加超链接。每个列表项的宽度为50px,高度为30px,列表中的文字在水平和垂直方向上均居中显示,超链接初始状态和访问后的状态均为黑色无下划线,鼠标经过和点

    2022年8月2日
    6

发表回复

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

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