有关于css的clear属性

最新推荐文章于 2022-03-14 15:49:27 发布

KylinBL

最新推荐文章于 2022-03-14 15:49:27 发布

阅读量1.3k

点赞数

分类专栏：前端开发文章标签： css float javascript 浏览器 internet html

本文链接：https://blog.csdn.net/kylinbl/article/details/5843375

版权

前端开发专栏收录该内容

68 篇文章 0 订阅

订阅专栏

定义和用法

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

说明

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

默认值：	none
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.clear="left"

实例

图像的左侧和右侧均不允许出现浮动元素：

img
  {
  float:left;
  clear:both;
  }

浏览器支持

所有主流浏览器都支持 clear 属性。

注释：任何版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。

可能的值

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

现在有几种情况，我分类来讨论：

1.对于非块级元素来说，它是可以在一行排列显示的，如果都设置了浮动可以使它们靠得更紧密一些;

现在以三个非块级元素为例，来实践一下。

三张图片：img1,img2,img3

在下面的html中测试clear产生的作用

<html>
<head>
<style type="text/css">
#img1
{
float:left;
}
#img2
{
float:left;
}
#img3
{
float:right;
}
</style>
</head>
<body>

初始三张图片都设置float:left,img2设置clear:left时，把自己弹到下一行去了;设置clear:right时，右边的浮动元素没反应?

现在把三张图片的float设置为right,img2设置clear:right时，自己弹到下一行去了;img2设置clear:left时，img1,3没反应？

现在看来，clear属性里的left和right是和float里的对应的，也就是说浮动元素的clear:left只对清除左浮动的元素起作用，right的同理。

注意：清除的是与引元素紧紧相邻的元素，有空过元素位后面的元素就不清除了。

看下面的：

#img1
{
float:left;
}
#img2
{
float:left;
clear:right;
}
#img3
{
float:right;
}

img2右边的img3浮动设置为right，可也没有清除掉，仍然在一行显示

如果中间一张图片没有设置浮动，就作为普通流，右边的浮动元素会自动换到下一行，所以clear:right都省了，

而左边如果有浮动元素，设置clear:left，自己还是会弹到下一行的。

KylinBL

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
有关于css的clear属性

定义和用法<br />clear 属性规定元素的哪一侧不允许其他浮动元素。说明<br />clear 属性定义了元素的哪边上不允许出现浮动元素。在 CSS1 和 CSS2 中，这是通过自动为清除元素（即设置了 clear 属性的元素）增加上外边距实现的。在 CSS2.1 中，会在元素上外边距之上增加清除空间，而外边距本身并不改变。不论哪一种改变，最终结果都一样，如果声明为左边或右边清除，会使元素的上外边框边界刚好在该边上浮动元素的下外边距边界之下。默认值：none继承性：no版本：CSS1JavaScrip
复制链接

扫一扫