清除浮动有以下三种方式：

1.父元素清除浮动

设置--->.box{overflow:hidden;}

<div class="box">

    <div class="left"></div>

    <div class="right"></div>

</div>

2.浮动元素后添加空div清除浮动

设置--->.clear{clear:both;}（通常情况both）

<div class="left"></div>

<div class="right"></div>

<div class="clear"></div>

3.伪元素清除浮动

设置-->.box::after{content:""; display:block; clear:both;}

<div class="box">

    <div class="left"></div>

    <div class="right"></div>

</div>

简单分析：

1.第一种方式：给父元素设置，内容溢出隐藏，将子元素拽回文档流，达到清除浮动效果。

2.第二种方式：浮动元素后面的div，设置清除浮动。

3.第三种方式：伪元素::after->box元素之后添加

    ""内容（无内容），块级元素，设置清除浮动

    与方式2原理一样。

clear:left;

clear:right;

clear:both;