前言：爲什麼要清除浮動？
因爲浮動的元素會脫離當前文檔流，將不再佔用當前頁面的位置,這樣它下面的元素會往上移動，從而使得原有的樣式發生變化，這是我們不希望看到的，所以設置浮動後一定要清除浮動！
方式1、使用樣式屬性clear: clear:left;//清除左浮動 clear:right;//清除右浮動 clear:both;//清除所有浮動
一般我們都會採用clear:both; 具體代碼如下：標紅代碼是關鍵代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動方式1</title>
<style type="text/css">
#div2{
float: left;
}
#div3{
float: right;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div id="div1" style="border:1px solid red;width:800px;">
<div id="div2" style="border:1px solid green;width:200px;height:200px;background-color:green;">
</div>
<div id="div3" style="border:1px solid blue;width:200px;height:200px;background-color:blue;">
</div>
<div class="clear"></div> <!--這裏的<div class="clear"></div>不能放置在父div外面，要緊挨着設置浮動的div,否則無效-->
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動方式2</title>
<style type="text/css">
#div2{
float: left;
}
#div3{
float: right;
}
</style>
</head>
<body>
<div id="div1" style="border:1px solid red;width:800px;overflow:hidden;"><!--一定要給父標籤設置-->
<div id="div2" style="border:1px solid green;width:200px;height:200px;background-color:green;">
</div>
<div id="div3" style="border:1px solid blue;width:200px;height:200px;background-color:blue;">
</div>
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮動方式2</title>
<style type="text/css">
#div2{
float: left;
}
#div3{
float: right;
}
</style>
</head>
<body>
<div id="div1" style="border:1px solid red;width:800px;height:200px;"><!--注意是給父標籤設置-->
<div id="div2" style="border:1px solid green;width:200px;height:200px;background-color:green;">
</div>
<div id="div3" style="border:1px solid blue;width:200px;height:200px;background-color:blue;">
</div>
</div>
</body>
</html>