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>