css中clear属性是什么？clear属性规定元素在某一方向上不允许有其他浮动元素。clear属性的工作原理是自动为清除元素（即设置了clear属性的元素）增加上外边距。
如果给名为box的元素声明为clear:left，box的上外边框（border-top）的边界将刚好在左侧浮动元素的下外边框（border-bottom）的边界之下。
clear属性默认为clear: none，clear属性值如表1所示。
表1 clear属性的值
【例】创建两个div元素box1和box2，设置浮动样式，浏览器显示效果如图1所示。CSS代码如下。
.box1{
border: 3px solid #c1c1bf;
background-color: #f8eeab;
}
.box2{
border: 3px solid #fcdfb5;
background-color: #dcc6b9;
}
.box{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
color: #909399;
float: left;
}
图1 创建两个div元素box1和box2
HTML代码如下。
<body>
<div class="box box1">
box1
</div>
<div class="box box2">
box2
/div>
</body>
给box2添加CSS属性clear: both，规定box2的两侧不准出现浮动元素，两个元素的排列方式如图2所示。CSS代码如下。
.box2{
border: 3px solid #fcdfb5;
background-color: #dcc6b9;
clear: both;
}
图2 给box2添加CSS属性clear: both
