作用:清除浮动元素对当前元素所产生的影响。
可选值:
left 清除左边浮动元素对当前元素的影响;
right 清除右边浮动元素对当前元素的影响;
both 清除两侧浮动元素对当前元素中最大的影响。
原理:设置清除浮动后,浏览器会自动为元素添加一个上外边距,使其位置不受其他元素影响。凭空加上一个标签,使用HTML解决了CSS的问题(不可取)。
比如:
<div class="box1" style="10px red solid"><div class="box2" style="float: left width: 200px height: 200px background-color: orange"></div></div>
此时box1出现高度塌陷问题,clear解决方法:
<div class="box1" style="10px red solid"><div class="box2" style="float: left width: 200px height: 200px background-color: orange"></div><div class="box3" style="clear: both"></div></div>