css中的clear的作用是什么_css中class的用法

2022-10-01 14:21:15 浏览数 (1)

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

css clear属性深入了解：

一、什么是 CSS clear清除浮动？

元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。

clear 属性指定元素两侧不能出现浮动元素。

使用 clear 属性往文本中添加图片廊：

clear属性值：

left 清除该元素 左边的浮动元素。俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素

right 清除该元素 右边的浮动元素。俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素

both清除两边的浮动 ，清除该元素 左右边的浮动元素。俗一点就是说谁设置了clear：both属性，谁的左右边 都不允许存在浮动的元素

none，就是不做任何处理，不清除任意一边的浮动元素

inherit，就是让它跟随父元素的属性值，父元素如何设置清除，它就如何设置清除。

属性

描述

值

CSS

clear

指定不允许元素周围有浮动元素。

left right both none inherit

1

二、clear应用场景

①Float 往往是用于图像，就像是办公软件word中的文字坏绕图片的方式设置，

那么clear就是让元素不要坏绕图片，而是自成一行

②float 布局时一样非常有用（让元素脱离正常的文档流）。

那么clear就是让脱离的元素回归到正常的文档流中。

清除图片浮动应用实例：

实例：图片浮动在左边，后面的元素清除左边的浮动，就是不要让p的左边存在 带有 浮动属性 的 元素。

那么p元素就会自己再去成一行了。

代码语言：javascript复制
代码语言：javascript复制
p {
      clear: left;
    }
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    img {
      float: left;
    }

    p {
      clear: left;
    }
  </style>
</head>

<body>

  <div style="width: 300px;border: 1px solid black;">
    <img src="http://www.runoob.com/images/klematis_small.jpg" alt="tu1" />
    <p>这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵 这里是一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵花一朵
    </p>
  </div>
</body>

</html>

结果展示：

没有清除浮动 设置清除浮动

布局中清除浮动实例：

float通过浮动设置，让文档脱离正常的标准流。设置了浮动的元素可以紧跟上上一个设置了浮动的元素后面，不再自成一行。

clear让这些浮动的元素 后面的元素回归正常的文档流，拥有自己的空间

实例：

设计一个空div，让其两边清除浮动，那么后面的元素就不会被覆盖，拥有自己的空间。

代码语言：javascript复制
 .clearfloat{
    clear: both;
  }
代码语言：javascript复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<style>
  body,
  p {
    padding: 0;
    margin: 0;
  }

  nav {
    width: 100%;
    height: 30px;
    background-color: gray;
  }

  .menu {
    float: left;
    width: 20%;
    height: 300px;
    background-color: blueviolet;
  }

  .banner {
    float: left;
    width: 60%;
    height: 300px;
    background-color: rosybrown;
  }

  .selector {
    float: left;
    width: 20%;
    height: 300px;
    background-color: yellowgreen;
  }

  .clearfloat {
    clear: both;
  }

  .normal {
    width: 50%;
    height: 320px;
    border: 1px dashed green;
    background: red;
  }
</style>

<body>
  <nav>导航导航区域</nav>
  <div class="menu">菜单菜单区域</div>
  <div class="banner">轮播轮播区域</div>
  <div class="selector">查询查询区域</div>
  <div class="clearfloat"></div>
  <div class="normal">这里是正常的文档，没有设置浮动，没有浮动，没有浮动！</div>
</body>

</html>

结果展示：

清除浮动之后，normal div就有自己的正常空间了。

三、clear 属性各个属性值。

left 清除该元素 左边的浮动元素。俗一点就是说谁设置了clear：left属性，谁的左边就不允许存在浮动的元素

right 清除该元素 右边的浮动元素。俗一点就是说谁设置了clear：right属性，谁的右边就不允许存在浮动的元素

both清除两边的浮动 ，清除该元素 左右边的浮动元素。俗一点就是说谁设置了clear：both属性，谁的左右边 都不允许存在浮动的元素

none，就是不做任何处理，不清除任意一边的浮动元素

inherit，就是让它跟随父元素的属性值，父元素如何设置清除，它就如何设置清除。

如下代码，1,2,3,4 div元素设置了做浮动，5,6,7 div元素设置了右浮动。

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7 {
      width: 100px;
      height: 100px;
    }

    .box1,
    .box2,
    .box3,
    .box4 {
      float: left;
    }

    .box5,
    .box6,
    .box7 {
      float: right;
    }

    .clear1 {
      clear: left;
    }
  </style>
</head>

<body>

  <div class="box1" style="background-color:red;">111</div>
  <div class="box2" style="background-color:rgb(115, 255, 0);">222</div>
  <div class="box3" style="background-color:rgb(187, 255, 0);">3333</div>
  <div class="box4" style="background-color:rgb(255, 0, 191);">444</div>
  <div class="box5" style="background-color:rgb(4, 0, 255);">555</div>
  <div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div>
  <div class="box7" style="background-color:rgb(255, 0, 191);">777</div>



</body>

</html>

结果展示：

下面是给box3，333这个div设置清除左边浮动，(那么它的左边就不会存在有浮动的元素)，

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7 {
      width: 100px;
      height: 100px;
    }

    .box1,
    .box2,
    .box3,
    .box4 {
      float: left;
    }

    .box5,
    .box6,
    .box7 {
      float: right;
    }

    .clearfloatleft {
      clear: left;
    }

    .clearfloatright {
      clear: right;
    }

    .clearfloatboth {
      clear: both;
    }
  </style>
</head>

<body>

  <div class="box1" style="background-color:red;">111</div>
  <div class="box2" style="background-color:rgb(115, 255, 0);">222</div>
  <div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div>
  <div class="box4" style="background-color:rgb(255, 0, 191);">444</div>
  <div class="box5" style="background-color:rgb(4, 0, 255);">555</div>
  <div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div>
  <div class="box7" style="background-color:rgb(255, 0, 191);">777</div>



</body>

</html>

结果展示：

给3设置清除左边浮动，因为1与2都是浮动的，为了达到3清除浮动的效果，3就自成一行了，紧接着3后面的元素，4,5,6,7还是按照自己的属性该干嘛干嘛，如何浮动就如何紧接着3的后面浮动。

下面是给box7，777这个div设置清除右边浮动，(那么它的右边就不会存在有浮动的元素)，

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7 {
      width: 100px;
      height: 100px;
    }

    .box1,
    .box2,
    .box3,
    .box4 {
      float: left;
    }

    .box5,
    .box6,
    .box7 {
      float: right;
    }

    .clearfloatleft {
      clear: left;
    }

    .clearfloatright {
      clear: right;
    }

    .clearfloatboth {
      clear: both;
    }
  </style>
</head>

<body>

  <div class="box1" style="background-color:red;">111</div>
  <div class="box2" style="background-color:rgb(115, 255, 0);">222</div>
  <div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div>
  <div class="box4" style="background-color:rgb(255, 0, 191);">444</div>
  <div class="box5" style="background-color:rgb(4, 0, 255);">555</div>
  <div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div>
  <div class="box7 clearfloatright" style="background-color:rgb(255, 0, 191);">777</div>



</body>

</html>

结果展示：

设置了box7 ，清除右边浮动，它右边的666,555都是浮动的，为了达到box7 右边没有浮动，box7就只好自己自成一行了。

下面是给box4，444这个div设置清除两边浮动，(那么它的两边都不会存在有浮动的元素)，

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7 {
      width: 100px;
      height: 100px;
    }

    .box1,
    .box2,
    .box3,
    .box4 {
      float: left;
    }

    .box5,
    .box6,
    .box7 {
      float: right;
    }

    .clearfloatleft {
      clear: left;
    }

    .clearfloatright {
      clear: right;
    }

    .clearfloatboth {
      clear: both;
    }
  </style>
</head>

<body>

  <div class="box1" style="background-color:red;">111</div>
  <div class="box2" style="background-color:rgb(115, 255, 0);">222</div>
  <div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div>
  <div class="box4 clearfloatboth" style="background-color:rgb(255, 0, 191);">444</div>
  <div class="box5" style="background-color:rgb(4, 0, 255);">555</div>
  <div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div>
  <div class="box7 clearfloatright" style="background-color:rgb(255, 0, 191);">777</div>



</body>

</html>

结果展示：

好像box4右边的浮动没有被清除啊？这个怎么就不正确了呢？没有按照理解中的来了呢？

难道是因为555,666是离开太远了，影响不到？下面来一个box4-5是进跟在box4后面的，

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1,
    .box2,
    .box3,
    .box4,
    .box4-5,
    .box5,
    .box6,
    .box7 {
      width: 100px;
      height: 100px;
    }

    .box1,
    .box2,
    .box3,
    .box4,
    .box4-5 {
      float: left;
    }

    .box5,
    .box6,
    .box7 {
      float: right;
    }

    .clearfloatleft {
      clear: left;
    }

    .clearfloatright {
      clear: right;
    }

    .clearfloatboth {
      clear: both;
    }
  </style>
</head>

<body>

  <div class="box1" style="background-color:red;">111</div>
  <div class="box2" style="background-color:rgb(115, 255, 0);">222</div>
  <div class="box3 clearfloatleft" style="background-color:rgb(187, 255, 0);">3333</div>
  <div class="box4 clearfloatboth" style="background-color:rgb(255, 0, 191);">444</div>
  <div class="box4-5 clearfloatboth" style="background-color:gold;">444-555</div>
  <div class="box5" style="background-color:rgb(4, 0, 255);">555</div>
  <div class="box6" style="border:1px dashed balck;background-color:rgb(0, 255, 0);">666</div>
  <div class="box7 clearfloatright" style="background-color:rgb(255, 0, 191);">777</div>



</body>

</html>

结果展示：

还是不行啊？！ box4右边还是存在浮动的元素，那么到底是因为什么呢？

四、出现清除没有效果的原因？？？

原因： 代码是顺序执行的，设置清除的没法影响后面加载的元素的，它只能影响前面的元素！

屁列，说法一样不对，下面的一个例子中box3出现可以清除是可以理解的，box4的加载在最后面怎么也可以清除了？

！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！

如下，box1 与box3设置为做浮动，box设置为右浮动，下载来给box3设置清除两边浮动，

它们的加载顺序是box1，然后是box2，最终是box3，

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7 {
      width: 100px;
      height: 100px;
    }

    .box1,
    .box3 {
      float: left;
    }

    .box2 {
      float: right;
    }

    .clearboth {
      clear: both;
    }
  </style>
</head>

<body>
  <div class="box1" style="background-color:red;">111</div>
  <div class="box2 " style="background-color:rgb(115, 255, 0);">222</div>
  <div class="box3 clearboth" style="background-color:rgb(187, 255, 0);">3333</div>
</body>

</html>

结果展示：

给box3设置，3个属性值的效果都是一致的。

box3设置 clear：both box3 设置clear：left

box3设置 clear：right

下面同样的box4设置清除效果。

下载顺序box1，box2，box3，box4，

代码：

代码语言：javascript复制
<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    .box1,
    .box2,
    .box3,
    .box4,
    .box5,
    .box6,
    .box7 {
      width: 100px;
      height: 100px;
    }

    .box1,
    .box3 {
      float: left;
    }

    .box2,
    .box4 {
      float: right;
    }

    .clearboth {
      clear: both;
    }

    .clearleft {
      clear: left;
    }

    .clearright {
      clear: right;
    }
  </style>
</head>

<body>

  <div class="box1" style="background-color:red;">111</div>
  <div class="box2 " style="background-color:rgb(115, 255, 0);">222</div>
  <div class="box3 " style="background-color:rgb(187, 255, 0);">3333</div>
  <div class="box4 clearboth " style="background-color:gray;">44444</div>



</body>

</html>

box4设置 clear：both box4设置 clear：left

box4设置 clear：right

box4是在box2后面

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/194832.html原文链接：https://javaforall.cn

css class

0 人点赞