一般浮動是什麼情況呢？一般是一個盒子裡使用了CSS float浮動屬性，導緻父級
對象盒子不能被撐開，這樣CSS float浮動就産生了。
1、背景不能顯示
由于浮動産生，如果對父級設定了（CSS background背景）CSS背景顔色或CSS背景
圖檔，而父級不能被撐開，是以導緻CSS背景不能顯示。
2、邊框不能撐開
如上圖中，如果父級設定了CSS邊框屬性（css border），由于子級裡使用了float
屬性，産生浮動，父級不能被撐開，導緻邊框不能随内容而被撐開。
3、margin padding設定值不能正确顯示
由于浮動導緻父級子級之間設定了css padding、css margin屬性的值不能正确表達。
特别是上下邊的padding和margin不能正确顯示。
<!DOCTYPE html>
<html>
<head>
<title>CSS清除浮動 清除float浮動</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.boxa {
background: #ddd;
border: 5px solid green;
margin:0 auto;
width:400px;
/*height: 80px;*/ /*方法一：對父級設定适合CSS高度*/
/*overflow: hidden; */ /*方法二：父級div定義 overflow:hidden*/
}
.boxb {
margin:0 auto;
width:400px;
}
.boxa-l {
float:left;
width:280px;
height:80px;
border:1px solid #F00;
background: black;
}
.boxa-r {
float:right;
width:100px;
height:80px;
border:1px solid #F00;
background: pink;
}
.boxb {
border:1px solid #000;
height:40px;
background: yellow;
}
.clear{
clear:both
}
</style>
</head>
<body>
<div class="boxa">
<div class="boxa-l">内容左</div>
<div class="boxa-r">内容右</div>
<div class="clear"></div> <!--方法三：clear:both清除浮動 -->
</div>
<div class="boxb">boxb盒子裡的内容</div>
</body>
</html>
清除浮動前：
清除浮動後：
備注：歡迎加入web前端求職招聘qq群：668352707