本文主要内容
本文主要介紹css浮動帶來的影響以及清除浮動的幾種方法
做橫向布局時我們一般會寫如下的代碼進行布局
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
.box1{background-color: pink;}
.smallbox{width: px;height:px;margin-right: px;float: left;background-color: red;}
.box2{width: px;height:px;background-color: blue;}
</style>
</head>
<body>
<div class="box1">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
<div class="box2"></div>
</body>
</html>
運作結果如圖：
清除浮動的幾種方法本文主要内容 此時圖中所示就是浮動會帶來的問題：浮動會讓div元素脫離文檔标準流，漂浮在标準流之上，就像圖中的四個紅色的box，它們浮動脫離了文檔标準流，導緻它們外層的box1内部相當于就沒有内容了，是以它的高度就沒有了，這樣box2發現它上面沒有東西，就跑到上面待着了.
怎麼讓藍色盒子下來呢？
方法一：使用clear:both
寫一個.clearfloat{clear:both;}的樣式，然後将box2添加上clearfloat類
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
.box1{background-color: pink;}
.smallbox{width: px;height:px;margin-right: px;float: left;background-color: red;}
.box2{width: px;height:px;background-color: blue;}
.clearfloat{clear:both;}
</style>
</head>
<body>
<div class="box1">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
<div class="box2 clearfloat"></div>
</body>
</html>
運作結果圖：這樣做所有浏覽器都能夠達到上圖的效果，但是我們現在程式存在一個問題：雖然box2盒子回到了box1的下面，但是我們并沒有看到粉色的box1盒子，此時我們使用開發者工具能夠很清楚的看到box1的高度是0.
清除浮動的幾種方法本文主要内容
方法二：使用僞類
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
.box1{background-color: pink;}
.smallbox{width: px;height:px;margin-right: px;float: left;background-color: red;}
.box2{width: px;height:px;background-color: blue;}
.clearfloat:after{display: block;content: "";clear: both;height: ;visibility:hidden;}
.clearfloat{zoom:;}/*相容IE6 7*/
</style>
</head>
<body>
<div class="box1 clearfloat">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
<div class="box2"></div>
</body>
</html>
效果圖清除浮動的幾種方法本文主要内容
方法三：使用overflow
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
.box1{background-color: pink;overflow:hidden/*hidden|auto都可以*/;zoom:;}
.smallbox{width: px;height:px;margin-right: px;float: left;background-color: red;}
.box2{width: px;height:px;background-color: blue;}
</style>
</head>
<body>
<div class="box1">
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
<div class="smallbox"></div>
</div>
<div class="box2"></div>
</body>
</html>
也能夠達到上圖的效果，我個人更推薦這種方式。
zoom：1
朋友們會發現方法二和三都出現了zoom:1，那麼zoom是什麼呢？
度娘告訴我們：zoom是 設定或檢索對象的縮放比例。設定或更改一個已被呈遞的對象的此屬性值将導緻環繞對象的内容重新流動。當設定了zoom的值之後，所設定的元素就會就會擴大或者縮小，高度寬度就會重新計算了，這裡一旦改變zoom值時其實也會發生重新渲染，運用這個原理，也就解決了ie下子元素浮動時候父元素不随着自動擴大的問題。