剛前端入門的童鞋肯定對”浮動“這個“小魔怪”又愛又恨，我也是如此，我是剛入門，可是每天都被浮動搞得頭昏腦漲的。
入正題啦~~~~~~~~~
我來總結一下浮動的產生和解決辦法吧，如有錯，請大神們多多指點，妹妹不甚感激。
- 先講一下浮動產生的原因
在css規范中，浮動定位不屬於正常的文檔流（正常的文檔流就是html文件里面的那些標簽元素，例如<div>,<p>等標簽元素），浮動是獨立定位的，會從正常文檔中脫離。
就好像一個只含有浮動元素的父容器，在顯示的時候不考慮子元素，就當他們不存在一樣，就造成父容器不存在一樣，就是傳說中的”高度塌陷“！！！！我們希望的效果都是左圖，然而世界就是一個比愛的過程，得到的卻是如右圖，哈哈哈，你贏了！！！然后我們就要總結一下解決這種問題的方法，就是傳說中的”清除浮動“了。
- 清除浮動的八大方法（以下方法的效果圖都是上面左圖，歡迎補充方法）
1. 浮動元素具有延伸性
可以理解為當父元素被設置為浮動元素后，該父元素就有延伸性，進而包含它里面含有的所有浮動元素。（不推薦，父元素為浮動元素，會影響它后面的布局）
1 <body>
2 <div id="wrap">
3 <div id="left">
4
5 </div>
6 <div id="right">
7
8 </div>
9 </div>
10 </body>
1 *{
2 margin: 0;
3 padding: 0;
4 }
5 #wrap{
6 float: left;
7 margin:80px 80px;
8 padding: 20px;
9 border: 3px double yellow;
10 width: 500px;
11 background-color: green;
12 }
13
14 #left{
15 float: left;
16 border: 3px double yellow;
17 width: 200px;
18 height: 300px;
19 background-color: blue;
20 }
21 #right{
22 float: right;
23 border: 3px double yellow;
24 width: 200px;
25 height: 300px;
26 background-color: blue;
27 }
2. 在塌陷父元素下的浮動元素的最后加”<div style="clear:both"></div>“這個代碼。（簡單直接當增無意義標簽，不利於語義化，每次都加空標簽，浪費）
1 <body>
2 <div id="wrap">
3 <div id="left">
4
5 </div>
6 <div id="right">
7
8 </div>
9 <div style="clear:both"></div>
10 </div>
11 </body>
1 *{
2 margin: 0;
3 padding: 0;
4 }
5 #wrap{
6 margin:80px 80px;
7 padding: 20px;
8 border: 3px double yellow;
9 width: 500px;
10 background-color: green;
11 }
12
13 #left{
14 float: left;
15 border: 3px double yellow;
16 width: 200px;
17 height: 300px;
18 background-color: blue;
19 }
20 #right{
21 float: right;
22 border: 3px double yellow;
23 width: 200px;
24 height: 300px;
25 background-color: blue;
26 }
3. 在含有浮動元素的父元素添加”overflow: hidden;“，原理就是觸發了BFC。
科普科普BFC: BFC：塊級格式上下文，是頁面上的一個隔離的獨立容易，容器里里面的子元素不會影響外面的元素。
使元素觸發成BFC的原因之一就是”overflow不為visible“，計算BFC高度時，浮動元素也參與計算。
所以針對這個問題的話，當我們把父元素的div的overflow設置為hidden，父元素就觸發形成BFC，所以高度會把浮動元素也參與計算。
<body>
<div id="wrap">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
*{ margin: 0; padding: 0;
} #wrap{ overflow: hidden; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;
} #left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} #right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
}
4. after偽元素：子元素后面，可以設置一個具有clear的元素，在將其隱藏。（推薦使用，屢試不爽哦）
1 <body>
2 <div id="wrap">
3 <div id="left">
4
5 </div>
6 <div id="right">
7
8 </div>
9
10 </div>
11 </body>
*{ margin: 0; padding: 0;
} #wrap{ margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;
} #left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} #right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} #wrap:after{ content: ""; clear: both; visibility: hidden; display: block;
}
5.浮動元素的結尾處加br標簽
<body>
<div id="wrap">
<div id="left">
</div>
<div id="right">
</div>
<br class="clearfloat"/>
</div>
</body>
*{ margin: 0; padding: 0;
} #wrap{ margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;
} #left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} #right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} .clearfloat{ clear: both;
}
6. 父div定義display: table; (會產生新的問題)
<body>
<div id="wrap">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
*{ margin: 0; padding: 0;
} #wrap{ display: table; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;
} #left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} #right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
}
7.父級div定義overflow: auto;（必須定義width或者zoom：1，不能定義height）
<body>
<div id="wrap">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
*{ margin: 0; padding: 0;
} #wrap{ overflow: auto; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;
} #left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} #right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
}
8.定義height咯
<body>
<div id="wrap">
<div id="left">
</div>
<div id="right">
</div>
</div>
</body>
*{ margin: 0; padding: 0;
} #wrap{ height: 352px; margin:80px 80px; padding: 20px; border: 3px double yellow; width: 500px; background-color: green;
} #left{ float: left; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
} #right{ float: right; border: 3px double yellow; width: 200px; height: 300px; background-color: blue;
}
八種方法都介紹完咯，第一次寫博客，有點手抖，請原諒啦，哈哈哈。
2015-12-03 20:22:53