clear用法

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

summer_paige

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

阅读量1.7k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/summer_paige/article/details/80300060

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

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

以上是w3c对clear的解释，丢个链接。http://www.w3school.com.cn/cssref/pr_class_clear.asp

解释很简单，但用起来会觉得有些迷惑。在浮动的基础之上我们对两张图片操作。
准备：
html为：

<body>
    <img src="pic.jpg" id="pic">
    <img src="tic.jpg" id="tic">
</body>

第一步：
接着对两张图片加一点样式，特地加了一点margin,看看设置了clear之后会不会变：

img{
        width:200px;
        height:200px;
        border:red 2px solid;
        margin:20px;
    }

此时的效果如下图：两张图大小一样，并排在一行。
这里写图片描述

可以看到两张图片的盒子模型参数如下：
这里写图片描述

第二步：分别给图片设置左浮动，图片二设置右浮动。

#pic{
     float:left;
    }

#tic{
    float:right;
    }

效果图如下。
这里写图片描述

问题来了:
如果我们想让第二张图在第二行，不在第一张的图片右边，我们应该怎么做。
第一种办法：第一张图设置clear：right，我们试一试。

#pic{
     float:left;
     clear:right;
    }

结果居然没有变！！！随后你把right改成both也没用。而我们此时看到margin值也没变。
这里写图片描述

这里写图片描述

第二种办法：给第二张图片设置clear:left，让它的左边不再有浮动元素。

#tic{
    float:right;
        clear：left;
    }

结果是，第二张图片换行了!!!!
1.因为设置了右浮动，所以在第二行的右边.
2.第二张图片设置了右边不许有做浮动元素，于是被迫下移。
3.margin值没有发生变化。
这里写图片描述

这里写图片描述

解释：我再查资料的过程中有一个分析说：
这里写图片描述

也就是说，你想让图片2移动，你就得给图片2设置clear.
后面看到更好的解释，会更新。

那么问题又来了：
如果我想让图片1移动，那我对图片1设置clear为什么它一点都没动呢？
我的解释是，如果它移动了，css就乱套了。会一直关注这个问题。

summer_paige

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
clear用法

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

扫一扫