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


相关推荐

  • 在吗?认识一下JWT(JSON Web Token) ?[通俗易懂]

    在吗?认识一下JWT(JSON Web Token) ?

    2022年2月14日
  • include用法及搭配(include相关短语)

    iostream与iostream.h#include<iostream.h>//这个就是1998年标准化以后的标准头文件#include<iostream>//这个就是标准化以前的头文件更本质上的区别就是iostream把标准C++库的组件放在一个名位std的namespace里面。而相对的iostream.h则将这些标准组件放在全…

    2022年4月14日
  • Linux内核版本_linux最新版本是多少

    Linux内核版本_linux最新版本是多少Linux版本linux版本分为两类:内核版本:免费的,它只是操作系统的核心,负责控制硬件、管理文件系统、程序进程等,并不给用户提供各种工具和应用软件; 发行版本:不一定免费,出了操作系统核心外,还包含一套强大的软件,例如:C/C++编译器和库等1、内核版本:1.1)内核版本命名:Linux内核版本号由3组数字组成:第一个组数字.第二组数字.第三组数字第一个组数字:目前发布的内核主版本。 第二个组数字:偶数表示稳定版本;奇数表示开发中版本。 第三个组数字:错误修补的次数。可以使

    2022年8月23日
  • qsort()函数详解

    qsort()函数详解一写在开头1.1本节内容学习C语言中的qsort()函数。二qsort()2.1函数原型函数功能:qsort()函数的功能是对数组进行排序,数组有nmemb个元素,每个元素大小为size。参

    2022年7月1日
  • springboot整合shiro实现权限控制

    springboot整合shiro实现权限控制ApacheShiro是一个强大且易用的Java安全框架,执行身份验证、授权、密码学和会话管理。使用Shiro的易于理解的API,您可以快速、轻松地获得任何应用程序,从最小的移动应用程序到最大的网络和企业应用程序。上个月写了一个在线教育的项目用到了shiro权限控制,这几天又复盘了一下,对其进行了深入探究,来总结一下。下面所总结的有关shiro的代码已经传到我的github上,可以访问下面的……

    2022年10月22日
  • Android sha1_android studio打包apk教程

    Android sha1_android studio打包apk教程开发版sha1方法一:打开AndroidStudio的Terminal窗口,进入.android目录(默认是在C:\Users\Administrator.android目录下),输入如下命令:keytool-v-list-keystoredebug.keystore方法二:在AndroidStudio右边找到Gradle,点开(图片不够大,右键,新窗口打开)接下来发布版版sh

    2022年8月10日

发表回复

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

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