css clear:left 的本质

来源：互联网发布：python游戏开发百度云编辑：程序博客网时间：2024/05/18 03:51

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>

0 0