2、浮動的原理：
使當前元素脫離普通流，相當于浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣
3、浮動的影響：
對附近的元素布局造成改變，使得布局混亂
因為浮動元素脫離了普通流，會出現(xiàn)一種高度坍塌的現(xiàn)象：
原來的父容器高度是內(nèi)部元素撐開的，但是當內(nèi)部元素浮動后，脫離普通流浮動起來，那父容器的高度就坍塌，變?yōu)楦叨?px。
如下圖：清除浮動的5種方法1、父級div定義overflow:hidden
<style type="text/css">
.div1{background:#000080;border:1px solid red;width:98%;overflow:hidden}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
原理：
使用overflow:hidden時，瀏覽器會自動檢查浮動區(qū)域的高度。
優(yōu)點：
簡單，代碼少，瀏覽器支持好。
缺點：
必須定義width或zoom:1，不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：
只推薦沒有使用position或?qū)verflow:hidden理解的朋友使用。
2、結(jié)尾處加空div標簽 clear:both
<style type="text/css">
.div1{background:#000080;border:1px solid red}
.div2{background:#800080;border:1px solid red;height:100px;margin-top:10px}
.left{float:left;width:20%;height:200px;background:#DDD}
.rightright{float:rightright;width:30%;height:80px;background:#DDD}
/*清除浮動代碼*/
.clearfloat{clear:both}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="clearfloat"></div>
</div>
<div class="div2">
div2
</div>
原理：
添加一個空p，利用css提高的clear:both清除浮動，讓父級p能自動獲取到高度。
優(yōu)點：
簡單，代碼少，瀏覽器支持好，不容易出現(xiàn)怪問題。
缺點：
不少初學者不理解原理；
如果頁面浮動布局多，就要增加很多空p，讓人感覺很不爽。
建議：
此方法是以前主要使用的一種清除浮動方法。
3、父級div定義height
<style type="text/css">
.div1{background:#000080;border:1px solid red;height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
</style>
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
原理：
父級p手動定義height，就解決了父級p無法自動獲取到高度的問題。
優(yōu)點：
簡單，代碼少，容易掌握。
缺點：
只適合高度固定的布局，要給出精確的高度，如果高度和父級p不一樣時，會產(chǎn)生問題。
建議：
不推薦使用，只建議高度固定的布局時使用。
4、父級div定義overflow:auto
.div1{background:#000080;border:1px solid red;width:98%;overflow:auto}
原理：
同1，使用overflow:auto時，瀏覽器會自動檢查浮動區(qū)域的高度。
優(yōu)點：
簡單，代碼少，瀏覽器支持好。
缺點：
內(nèi)部寬高超過父級p時，會出現(xiàn)滾動條。
建議：
不推薦使用，如果你需要出現(xiàn)滾動條或者確保你的代碼不會出現(xiàn)滾動條就使用吧。
5、父級div定義偽類:after和zoom
<style type="text/css">
.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.clearfloat{zoom:1}
</style>
<div class="div1 clearfloat">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
優(yōu)點：
瀏覽器支持好，不容易出現(xiàn)怪問題（目前：
大型網(wǎng)站都有使用，如：
騰迅，網(wǎng)易，新浪等等）。
缺點：
代碼多，不少初學者不理解原理，要兩句代碼結(jié)合使用，才能讓主流瀏覽器都支持。
建議：
推薦使用，建議定義公共類，以減少CSS代碼。
更多編程相關知識，請訪問：編程教學??！
更多關于云服務器，域名注冊，虛擬主機的問題，請訪問西部數(shù)碼官網(wǎng)：m.ps-sw.cn
