清除浮動有以下三種方式：

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;