CSS clear 属性取值详解

最新推荐文章于 2024-08-28 17:25:52 发布
最新推荐文章于 2024-08-28 17:25:52 发布
阅读量1.2w 收藏 75
点赞数 15
分类专栏： 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuzhiyue2/article/details/117608385
版权

CSS clear属性 浮动元素 布局 前端开发
关键词由CSDN通过智能技术生成

之前有整理过一部分知识点, 一直没有发布, 因为都是有关 前端 方面的零散内容; 现在想想无论分享什么内容都需要慢慢积累, 所以还是决定将之前整理的相关内容验证之后慢慢分享给大家 这个专题 就是 工作中开发问题总结 相关的内容; 不积跬步，无以至千里, 一时得失莫要在意 。

好了废话不多说, 直接上代码以及图例(为了让大家方便阅读, 都有自己验证过程的一些图片作为分享) 。

1.clear 属性定义:
1. clear 属性规定元素的哪一侧不允许其他浮动元素 。

2. clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。
2.clear 属性值
1. clear: none -- 允许浮动元素 (默认值) 。

2. clear: left -- 在左侧不允许浮动元素 。
	 1. clear:left 的含义是如果当前元素的左侧有浮动元素，那么就强制该元素另起一行 。
   
3. clear: right -- 在右侧不允许浮动元素 。
	 1. clear:right 的含义是如果当前元素的右侧有浮动元素，那么就强制该元素另起一行 。
   
4. clear: both -- 在左右侧均不允许浮动元素 。

5. clear: inherit -- 从父元素继承 clear 属性 。
3为什么会有浮动
1. 在我们页面正常显示的排版布局中, 元素可分为块级元素与行内元素；

2. 在标准文档流中块级元素会独占一行, 行内元素会从左至右依次铺展开；

3. 这样的设置在我们实际开发中是不能完全满足我们设计需求的, 因此就有了浮动这样的设置 。

4. 浮动元素会脱离原有的文档流, 也就是标准文档流; 通俗来讲就是不在一个层级上 。
4. clear生效总结
1. 设置 clear 属性时, 只对当前浮动元素生效, 对于其他的元素标签没有效果 。

2. 例如: 页面中有两个 div , 同时设置 float: left, 当我们对第一个元素设置 clear: riaght 时, 并不能使第二个元素排列在第二行
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clear 属性取值详解</title>
</head>
<style>
.w_clear-shel {
  background-color: yellow;
  overflow: hidden;
}
ul li {
  list-style: none;
}

/* 验证 clear 生效规则 */
.w_take-situation {
  width: 200px;
  height: 200px;
  background-color: darkgoldenrod;
  float: left;
  margin: 20px;
}
.w_f-s-1 {
  /* 设置没有生效 */
 clear: right;
}
.w_f-s-2 {
  /* 设置生效代码 */
  clear: left;
}

</style>

<body>
  <div class="w_clear-shel">
    <div class="w_take-situation w_f-s-1">1</div>
    <div class="w_take-situation w_f-s-2">2</div>
  </div>
</body>
</html>
图片示例:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. clear: none 属性代码及效果图片展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clear 属性取值详解</title>
</head>
<style>
.w_clear-shel {
  background-color: aliceblue;
}
ul li {
  list-style: none;
}
/* clear: none */
.w_clear-none {
  background-color: burlywood;
}
.w_c-n-item {
  width: 160px;
  height: 120px;
  background-color: cadetblue;
  margin: 8px 4px;
  text-align: center;
  line-height: 120px;
}
.w_c-n-item-4 {
  /* 在此处我们可以分别注释 float 设置, 来查看图例中的效果 */
  /* float: left; */
  float: right;
  clear: none;
}
.w_c-n-item-5 {
  background-color: yellow;
  /* height: 150px; */
  /* width: 200px; */
}
</style>

<body>
  <div class="w_clear-shel">
    <!-- clear: none -->
    <ul class="w_clear-none">
      <li class="w_c-n-item">1</li>
      <li class="w_c-n-item">2</li>
      <li class="w_c-n-item">3</li>
      <li class="w_c-n-item w_c-n-item-4">4</li>
      <li class="w_c-n-item w_c-n-item-5">测试当前内容显示</li>
    </ul>
  </div>
</body>
</html>
图片展示:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. clear: left 属性代码及效果图片展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clear 属性取值详解</title>
</head>
<style>
.w_clear-shel {
  background-color: yellow;
}
ul li {
  list-style: none;
}

/* clear: left */
.w_clear-left {
  background-color: turquoise;
  margin: 30px 0;
  width: 1200px;
}
.w_c-l-item {
  width: 160px;
  height: 120px;
  background-color: rosybrown;
  margin: 8px 4px;
  text-align: center;
  line-height: 120px;
  /* 图例的各种效果可以通过下面的代码, 设置来查看 */
  /* float: left; */
  /* clear: left; */
}
.w_c-l-item-4 {
  /* 图例的各种效果可以通过下面的代码, 设置来查看 */
  float: left;
  clear: left;
}

</style>

<body>
  <div class="w_clear-shel">
    <!-- clear: left -->
    <ul class="w_clear-left">
      <li class="w_c-l-item">1</li>
      <li class="w_c-l-item">2</li>
      <li class="w_c-l-item">3</li>
      <li class="w_c-l-item w_c-l-item-4">4</li>
      <!-- <li class="w_c-l-item">5</li> -->
    </ul>
  </div>
</body>
</html>
图片展示:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

7. clear: right 属性代码及效果图片展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clear 属性取值详解</title>
</head>
<style>
.w_clear-shel {
  background-color: yellow;
}
ul li {
  list-style: none;
}
  
/* clear: right */
.w_clear-right {
  background-color: turquoise;
  margin: 30px 0;
  width: 1200px;
}
.w_c-r-item {
  width: 160px;
  height: 120px;
  background-color: rebeccapurple;
  margin: 8px 4px;
  text-align: center;
  line-height: 120px;

  /* float: right; */
}
.w_c-r-item-4 {
  float: right;
  clear: right;
}
.w_c-r-item-5 {
  float: right;
}

</style>

<body>
  <div class="w_clear-shel">
    <!-- clear: right -->
    <ul class="w_clear-right">
      <li class="w_c-r-item">1</li>
      <li class="w_c-r-item">2</li>
      <li class="w_c-r-item">3</li>
      <li class="w_c-r-item w_c-r-item-4">4</li>
      <li class="w_c-r-item w_c-r-item-5">5</li>
    </ul>
  </div>
</body>
</html>
图片展示:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

8. clear: both 属性代码及效果图片展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS clear 属性取值详解</title>
</head>
<style>
.w_clear-shel {
  background-color: yellow;
}
ul li {
  list-style: none;
}

/* clear: both */
.w_clear-both {
  background-color: crimson;
  margin: 30px 0;
  width: 1200px;
}
.w_c-b-item {
  width: 160px;
  height: 120px;
  background-color: lightseagreen;
  margin: 8px 4px;
  text-align: center;
  line-height: 120px;

  /* float: left; */
}
.w_c-b-item-3 {
  float: right;
  /* float: left; */
  clear: both;
}
.w_c-b-item-4 {
  /* float: right; */
  float: left;
  clear: both;
}
.w_c-b-item-5 {
  float: right;
  clear: both;
}

/* clear: inherit */

</style>

<body>
  <div class="w_clear-shel">
    <!-- clear: both -->
    <ul class="w_clear-both">
      <li class="w_c-b-item">1</li>
      <li class="w_c-b-item">2</li>
      <li class="w_c-b-item w_c-b-item-3">3</li>
      <li class="w_c-b-item w_c-b-item-4">4</li>
      <li class="w_c-b-item w_c-b-item-5">5</li>
    </ul>
  </div>
</body>
</html>
图片展示:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

如果对你有所帮助，希望大家喜欢点个关注；整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 每次整理时都在思考如何让大家更容易理解, 更容易找到、看到自己想看到的内容; 无论知识点是大是小, 我都会验证后再分享, 以防自己发表的文章给大家造成误导。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。
黑木令
关注
专栏目录
css clear属性 的深入了解
xiaomizhou66a的博客
07-07 2797
css clear属性深入了解： 一、什么是 CSS clear清除浮动？ 元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。 clear 属性指定元素两侧不能出现浮动元素。 使用 clear 属性往文本中添加图片廊： clear属性值： lef...
【CSS布局】详解display，position， float属性！
Sixstar_yanxin的博客
08-14 598
页面布局，或者是在页面上做些小效果的时候经常会用到 display,position和float 属性，如果对它们不是很了解的话，很容易出现一些莫名其妙的效果，痛定思痛读了《CSS Mastery》后总结一下。 让我们从基础的CSS知识谈起，相信很多初学者和小弟一样不明白CSS原理，一味追求效果，结果页面漏洞百出，错误匪夷所思，关于盒模型我就不多说了，网上很多，注意一下IE和其他浏览器（W3C规范）的区别就好了。 块级元素与行内元素 首先谈谈人们经常提及的块级元素和行内(内联)元素 p, ..
clear属性
xiaoxingxingzai的博客
10-23 1036
clear属性 一.说明 clear 属性规定元素的哪一侧不允许其他浮动元素。 二.取值 left 在左侧不允许浮动元素。 right 在右侧不允许浮动元素。 both 在左右两侧均不允许浮动元素。 none 默认值。允许浮动元素出现在两侧。 inherit 规定应该从父元素继承 clear 属性的值。 通常取值为both 注意：使用该属性的元素必须是块级元素（block或inline-block...
CSS系列之浮动清除clear（三）
最新发布
易雪寒的博客
08-28 556
可以看到我们的底部盒子不在原来的位置了，原因是什么呢,原因就是此时父元素我们并没有给他设置高度，父元素的高度完全是1号2号盒子撑起来的，现在给1号2号盒子添加了浮动，不占据原来的位置了，所以父元素此时的高度为零，不占位置了，底部盒子就会上去,造成高度塌陷。直接给第二个盒子添加一个clear:left 这里需要注意,clear消除的是上一个盒子对自己的影响，所以，前面一个盒子往哪边浮动，我们就clear哪边，这里的上一个盒子是float:left，所以我们在第二个盒子上添加的也是clear:left。
css中的clear属性
rt5476238的博客
12-28 504
所有主流浏览器都支持 clear 属性。 clear 属性规定元素的哪一侧不允许其他浮动元素。 我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能 可选值： none，默认值，不清除浮动 left，清除左侧浮动元素对当前元素的影响 right，清除右侧浮动元素对当前元素的影响 both，清除两侧浮动元素对当前元素的影响 ...
详解CSS中clear属性both、left、right值的含义
azhen5222的博客
12-29 652
前几天一朋友在群里问clear:left的意思，我以为是简单的清除浮动问题，就让他百度“清除浮动”，导致中间有点小误会。后来我按照他写的DEMO，发现我自己也没完全理解clear:left和clear:right的意思。特别看了下手册，和写了几个DEMO，经过群里其他人指导，总结如下，希望对其他人能有点帮助。 clear的值有四个 none：允许两边都可以有浮动对象； ...
html clear属性值,clear属性有哪些属性值 CSS clear属性的理解.
weixin_39535527的博客
06-04 3227
CSS clear是什么属性。。。语法： clear : none | left |right | both 参数： none : 允许两边都可以有浮动对象 both : 不允许有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 说明： 该属性的值指出了不允许有浮动对象的边。请参阅float属性。css中clear属性是什么意思clear 属性规定元素的哪一侧不允...
详解CSS中clear:left/right的用法
12-08
【CSS中的clear属性详解】 在CSS布局中，`clear`属性是一个非常重要的概念，它用于控制元素如何处理周围的浮动元素。通常，我们在处理浮动元素（使用`float`属性）时，可能会遇到元素的位置受到浮动元素影响的情况...
css浮动属性float详解
08-19
浮动属性有三个可能的取值：left、right和none。默认值为none。 - 当设置为left时，元素会向左浮动，其周围的内容会围绕在右侧。 - 当设置为right时，元素会向右浮动，其周围的内容会围绕在左侧。 - 当设置为none时...
clear
chisu3831的博客
05-13 122
clear 属性规定元素的哪一侧不允许其他浮动元素。 说明 clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间...
html clear属性值,css clear属性怎么用
weixin_30641597的博客
06-04 343
css clear属性指定元素的左侧或右侧上不允许出现浮动元素。可用于实现浮动的清除，解决浮动布局带来的一些问题。css clear属性怎么用？clear 属性规定元素的哪一侧不允许其他浮动元素。语法：clear:left|right|both|none|inherit;属性值：●　left：在左侧不允许浮动元素。●　right：在右侧不允许浮动元素。●　both：在左右两侧均不允许浮动元素。●　...
CSS：clear
雷爷的博客
09-03 924
<!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-...
clear属性的作用
Insist
12-04 3568
clear属性用于在块级元素中清除浮动效果的其值可以设置成： clear：both 清除左右两边的的浮动 clear：left 清除左边的浮动 clear： right 清除右边浮动 clear： none 左右都有浮动效果 与float的区别不同的是，clear是清除float的之前的设置效果重新在新的一行生成其设置的值的效果 ...
css之clear属性
Benson的专栏
08-16 1410
clear属性用来设置元素左右两边是否可以存在浮动元素。 它的值包括:left,right,both,none。其中none代表左右两边可以出现浮动元素。
CSS的clear属性
lectery的专栏
03-15 243
clear 版本：CSS1　 兼容性：IE4+ NS4+　继承性：无 语法： clear : none | left |right | both 参数： none : 　允许两边都可以有浮动对象 both : 　不允许有浮动对象 left : 　不允许左边有浮动对象 right : 　不允许右边有浮动对象 说明： 该属性的值指出了不...
属性clear
m0_67176957的博客
04-01 158
<head> ......... <style> div{ font-size:50px; } .box1{ width:200px;...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

黑木令

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值