清除float浮動造成影響的幾種解決方案
1. “清除浮動” ？？準確的描述應該是“清除浮動造成的影響” 學習浮動推薦的視頻教程《CSS深入理解之float浮動》
2.如何清除浮動造成的影響？？？
栗子 塊級div元素包含一個內聯img元素，此時div的高應該是圖片img撐開的高度，當設置了圖片img元素設置浮動後，div高度就會坍塌
浮動的破壞性 浮動導致高度坍陷代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何清除浮動造成的影響</title>
</head>
<body>
<div style=" background-color:#CBD6EA; padding:5px;" >
<img src="img/item_05.png" width="50px" style="float:left;">
</div>
</body>
</html>3.包裹性/float浮動/position:absolute定位
a.首先的說明包裹性，因為具有包裹性的元素都可以清除浮動造成的影響
b.對於float浮動 包裹性 對於一個塊級block元素，div默認寬度100%，設置float:left/right後，其寬度表現為內容的寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用float: left清除浮動造成的影響</title>
<style type="text/css">
.box {
background-color:#CBD6EA;
padding:5px;
float: left;
}
</style>
</head>
<body>
<div class="box">
<img src="img/item_05.png" width="50px">
</div>
</body>
</html>c.對於absolute絕對定位 包裹性 對於一個塊級block元素，div默認寬度100%，設置position:absolute後，其寬度表現為內容的寬度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用position: absolute清除浮動造成的影響</title>
<style type="text/css">
.box {
background-color:#CBD6EA;
padding:5px;
position: absolute;
}
</style>
</head>
<body>
<div class="box">
<img src="img/item_05.png" width="50px">
</div>
</body>
</html>綜合上述說明 無論是float浮動或是absolute絕對定位最終都向display:inline-block靠攏
4.幾種“清除浮動造成的影響”解決方案
方案一.利用display:inline-block清除浮動
（說明 對於display:inline-block（塊級內聯元素，可以想象成冰水混合物）而言，無論 是塊級block元素還是inline元素，使用了該屬性後，block元素體現為內容的寬度，自左向右排列，
inline元素體現為可以像塊級元素那樣設置寬高 ）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用inline-block清除浮動造成的影響</title>
<style type="text/css">
.box {
background-color:#CBD6EA;
padding:5px;
display: inline-block;
}
</style>
</head>
<body>
<div class="box">
<img src="images/item_05.png" width="50px" style="float:left;">
</div>
</body>
</html>
方案二.對於 overflow:hidden的包裹性（或可靠的迫使父元素包含浮動的子元素）,設置了overflow:hidden屬性使得坍陷div有了高度
overflow:hidden另一個作用是超大的子內容會被容器剪切掉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用position: absolute清除浮動造成的影響</title>
<style type="text/css">
.box {
background-color:#CBD6EA;
padding:5px;
overflow: hidden;/*清除父容器高度坍塌*/
}
</style>
</head>
<body>
<div class="box">
<img src="img/item_05.png" width="50px" style="float:left;">
</div>
</body>
</html>
方案三.對於zoom的包裹性,比例縮放，跟CSS3中transform:scale類似; 已經不能清除浮動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用position: absolute清除浮動造成的影響</title>
<style type="text/css">
.box {
background-color:#CBD6EA;
padding:5px;
zoom: 1;
}
</style>
</head>
<body>
<div class="box">
<img src="img/item_05.png" width="50px" style="float:left;">
</div>
</body>
</html>
方案四.使用偽類:after + zoom方法，清除浮動<推薦方法>
.clearfix{*zoom:1;}
.clearfix:after{display:block; content:‘clear‘; clear:both;height: 0; line-height: 0; font-size: 0;visibility:hidden;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>利用position: absolute清除浮動造成的影響</title>
<style type="text/css">
.box {
background-color:#CBD6EA;
padding:5px;
}
/*推薦方法*/
.clearfix{*zoom:1;} /*IE6/IE7*/
.clearfix:after{display:block; content:‘clear‘; clear:both; height: 0; line-height: 0; font-size: 0;visibility:hidden;}
</style>
</head>
<body>
<div class="box">
<img src="img/item_05.png" width="50px" style="float:left;">
</div>
</body>
</html>
【資料參考 】
http://www.zhangxinxu.com/wordpress/2010/01/對overflow與zoom清除浮動的一些認識/
清除float浮動造成影響的幾種解決方案