如有以下代码片段：

<!-- 结构 -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

/*样式*/
box1{
    width: 100px;
    height: 100px;
    background-color: yellow;
}
box2{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
}
box3{
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

其效果如图-1：

如果将box1设置为向左浮动：

/*样式*/
box1{
    width: 100px;
    height: 100px;
    background-color: yellow;

    /*设置box1向左浮动*/
    float: left;
}
box2{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
}
box3{
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

其效果如图-2：

由于受到box1浮动的影响，box2整体向上移动了100px。
我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能。

• 使用clear来清除其他浮动元素对当前元素的影响
  可选值：
  none：不清除浮动。
  left：清除左侧浮动元素对当前元素的影响。
  right：清除右侧浮动元素对当前元素的影响。
  both：清除两侧浮动元素对当前元素的影响（清除对他影响最大的那个元素的浮动）。

设置box2清除左侧浮动元素对当前元素的影响：

/*样式*/
box1{
    width: 100px;
    height: 100px;
    background-color: yellow;

    /*设置box1向左浮动*/
    float: left;
}
box2{
    width: 200px;
    height: 200px;
    background-color: yellowgreen;

    设置清除左侧浮动元素box2的影响*/
    clear: left;
}
box3{
    width: 300px;
    height: 300px;
    background-color: skyblue;
}

其效果如图-3：

清除box1对box2产生的影响，清除浮动之后，元素会回到其他元素浮动之前的位置。

如发现错误请联系我，谢谢你。
本文链接：http://ninefire.tk/HTML&CSS.basics/47.html