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;}

  

  

  

 

  

      

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • c#/winform中InitializeComponent()函数的作用[通俗易懂]

    InitializeComponent()方法写在前面和后面是有区别的。InitializeComponent()方法是用来初始化窗体组件的,在InitializeComponent之前,窗体的各个控件还没有进行初始化,比如说窗体上有一个TextBoxUserName,在InitializeComponent之前它还只是一个TextBox类型的变量而已,如果在InitializeComponent之前调用这个TextBox的属性或方法,就会出错。再比如说你拖上取一个TextBox,它放在Form的位置,Te

  • 【032】JavaScript 计算笛卡尔积[通俗易懂]

    【032】JavaScript 计算笛卡尔积[通俗易懂]这是一个用JavaScript实现笛卡尔积的例子。注意:本文中所说的集合是指数学上的集合,不是es6里的Set。整体思路如下:用户传入一个二维的数组,每个子数组都是一个要进行笛卡尔积计算的集合。返回一个二维数组,每个子数组都是一个有序对或者n元有序组。当用户传入一个集合的时候,为了兼容业务,返回形如:[[a],[b]…]的二维数组。当用户只传入两个集合计算的时候,普通的嵌套计算即可。当用

  • 好用的vue富文本编辑器记录[通俗易懂]

    好用的vue富文本编辑器记录[通俗易懂]vue-quill-editorhttps://github.com/surmon-china/vue-quill-editorhttps://www.npmjs.com/package/vue-quill-editorhttps://blog.csdn.net/nickroprak/article/details/86645519(自定义图片上传)*默认上传图片为base64编吗…

    2022年10月14日
  • 重复字符串 leetcode_无重复字符的最长子串c语言

    重复字符串 leetcode_无重复字符的最长子串c语言原题链接给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度。示例 1:输入: s = “abcabcbb”输出: 3 解释: 因为无重复字符的最长子串是 “abc”,所以其长度为 3。示例 2:输入: s = “bbbbb”输出: 1解释: 因为无重复字符的最长子串是 “b”,所以其长度为 1。示例 3:输入: s = “pwwkew”输出: 3解释: 因为无重复字符的最长子串是 “wke”,所以其长度为 3。 请注意,你的答案必须是 子串 的长度,”pwk

  • Parallel.Foreach的全部知识要点【转】[通俗易懂]

    Parallel.Foreach的全部知识要点【转】[通俗易懂]简介当需要为多核机器进行优化的时候,最好先检查下你的程序是否有处理能够分割开来进行并行处理。(例如,有一个巨大的数据集合,其中的元素需要一个一个进行彼此独立的耗时计算)。.netframework4中提供了Parallel.ForEach和PLINQ来帮助我们进行并行处理,本文探讨这两者的差别及适用的场景。Parallel.ForEachParallel.F…

  • SRC挖掘—web不安全的直接对象引用 (IDOR)漏洞-3day

    SRC挖掘—web不安全的直接对象引用 (IDOR)漏洞-3day什么是IDOR?当应用程序根据用户提供的输入提供对对象的直接访问时,就会发生不安全的直接对象引用(IDOR)。由于此漏洞,攻击者可以绕过授权并直接访问系统中的资源,例如数据库记录或文件。不安全的直接对象引用允许攻击者通过修改用于直接指向对象的参数值来绕过授权并直接访问资源。这些资源可以是属于其他用户的数据库条目、系统中的文件等等。这是因为应用程序接受用户提供的输入并使用它来检索对象而没有执行足够的授权检查。(来源:OWASP)让我们看一个例子。想象一下,您正在使用一个文档共享平台。您可以上传..

发表回复

您的电子邮箱地址不会被公开。

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