css clear:left 的本质

最新推荐文章于 2023-12-23 13:55:14 发布

ISaiSai

最新推荐文章于 2023-12-23 13:55:14 发布

阅读量703

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/ISaiSai/article/details/39313523

版权

CSS 专栏收录该内容

94 篇文章 1 订阅

订阅专栏

css clear：left 的本质是margin-top 默认设置了一个和上一个浮动元素相同高度的值

验证方式：

设置两个float：left 的div 100px 的宽高，第二个div 设置clear：left

发现第二个div 设置margin-top 100 以下时，无反应，设置超过100px 的时候才会出来两个div的空隙，因此证实 clear：left 实质是设置了第二个div的margin-top

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

http://www.w3school.com.cn/cssref/pr_class_clear.asp

测试代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="gbk">
<style type="text/css">
.wyFirst
{
width: 100px; height: 100px;background-color: red;
}

.wySecond
{
float: left;
width: 100px;
height: 100px;
background-color: blue;
}

.wyThird
{
width: 100px;
height: 300px;
background-color: green;
clear: left;
margin-top: 100px
}
</style>
</head>
<body>
<div>
<div class="wyFirst">this is a test</div>

<div class="wySecond">this is a float</div>

<div class="wyThird" >this is a float</div>
</div>
</body>
</html>