浮動(dòng)是布局的時(shí)用到的一種技術(shù)，能夠方便我們進(jìn)行布局亲配。
浮動(dòng)的設(shè)置： css屬性float： left/right/none 左浮動(dòng)/右浮動(dòng)/不浮動(dòng)（默認(rèn)）
浮動(dòng)的原理： 使當(dāng)前元素脫離普通流抵皱，相當(dāng)于浮動(dòng)起來一樣较剃，浮動(dòng)的框可以左右移動(dòng)纬朝，直至它的外邊緣遇到包含框或者另一個(gè)浮動(dòng)框的邊緣
浮動(dòng)的影響： 對(duì)附近的元素布局造成改變渐苏，使得布局混亂
因?yàn)楦?dòng)元素脫離了普通流掀潮，會(huì)出現(xiàn)一種高度坍塌的現(xiàn)象： 原來的父容器高度是內(nèi)部元素?fù)伍_的，但是當(dāng)內(nèi)部元素浮動(dòng)后整以，脫離普通流浮動(dòng)起來胧辽，那父容器的高度就坍塌，變?yōu)楦叨?px公黑。
1.父級(jí)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時(shí)邑商，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度。
優(yōu)點(diǎn)： 簡(jiǎn)單凡蚜，代碼少人断，瀏覽器支持好。
缺點(diǎn)： 必須定義width或zoom:1朝蜘，不能和position配合使用恶迈，因?yàn)槌龅某叽绲臅?huì)被隱藏。
建議： 只推薦沒有使用position或?qū)verflow:hidden理解的朋友使用谱醇。
2.結(jié)尾處加空div標(biāo)簽clear:both暇仲；
<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
<div></div>
</div>
原理： 添加一個(gè)空div，利用css提高的clear:both清除浮動(dòng)副渴，讓父級(jí)div能自動(dòng)獲取到高度奈附。
優(yōu)點(diǎn)： 簡(jiǎn)單，代碼少煮剧，瀏覽器支持好斥滤，不容易出現(xiàn)怪問題。
缺點(diǎn)： 不少初學(xué)者不理解原理勉盅； 如果頁面浮動(dòng)布局多佑颇，就要增加很多空div，讓人感覺很不爽草娜。
建議： 此方法是以前主要使用的一種清除浮動(dòng)方法挑胸。
另外,也通過給父級(jí)元素添加偽類after設(shè)置clear:both，達(dá)到清除浮動(dòng)的目的
3.父級(jí)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>
原理： 父級(jí)div手動(dòng)定義height宰闰，就解決了父級(jí)div無法自動(dòng)獲取到高度的問題茬贵。
優(yōu)點(diǎn)： 簡(jiǎn)單凸克，代碼少，容易掌握闷沥。
缺點(diǎn)： 只適合高度固定的布局，要給出精確的高度咐容，如果高度和父級(jí)div不一樣時(shí)舆逃，會(huì)產(chǎn)生問題。
建議： 不推薦使用戳粒，只建議高度固定的布局時(shí)使用路狮。
4.父級(jí)div定義overflow:auto
.div1{background:#000080;border:1px solid red;width:98%;overflow:auto}
原理： 同1，使用overflow:auto時(shí)蔚约，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度奄妨。
優(yōu)點(diǎn)： 簡(jiǎn)單，代碼少苹祟，瀏覽器支持好砸抛。
缺點(diǎn)： 內(nèi)部寬高超過父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條树枫。
建議： 不推薦使用直焙，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧。
5.父級(jí)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)點(diǎn)： 瀏覽器支持好砂轻，不容易出現(xiàn)怪問題（目前： 大型網(wǎng)站都有使用奔誓，如： 騰迅，網(wǎng)易搔涝，新浪等等）厨喂。
缺點(diǎn)： 代碼多，不少初學(xué)者不理解原理庄呈，要兩句代碼結(jié)合使用蜕煌，才能讓主流瀏覽器都支持。
建議： 推薦使用抒痒，建議定義公共類幌绍，以減少CSS代碼。
