大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

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元素就会自己再去成一行了。

p {
      clear: left;
    }

<!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>

结果展示：

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

css中的clear的作用是什么_css中class的用法
布局中清除浮动实例：

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

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

实例：

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

 .clearfloat{
    clear: both;
  }

<!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就有自己的正常空间了。

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

三、clear 属性各个属性值。

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

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

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

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

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

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

<!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>

结果展示：

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

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

代码：

<!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的后面浮动。

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

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

<!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就只好自己自成一行了。

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

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

代码：

<!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右边的浮动没有被清除啊？这个怎么就不正确了呢？没有按照理解中的来了呢？

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

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

代码：

<!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右边还是存在浮动的元素，那么到底是因为什么呢？

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

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

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

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

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

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

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

代码：

<!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，

代码：

<!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

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

box4设置 clear：right

box4是在box2后面

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