前段時(shí)間用到了這些東西，學(xué)習(xí)順便整理在了一起出皇，清楚浮動(dòng)幾種方法沒(méi)有試羞芍，有時(shí)間再深入學(xué)習(xí)一下。
*************************
八種清楚浮動(dòng)的方式
1郊艘，父級(jí)div定義 height
原理：父級(jí)div手動(dòng)定義height荷科，就解決了父級(jí)div無(wú)法自動(dòng)獲取到高度的問(wèn)題。
優(yōu)點(diǎn)：簡(jiǎn)單纱注、代碼少畏浆、容易掌握
缺點(diǎn)：只適合高度固定的布局，要給出精確的高度狞贱，如果高度和父級(jí)div不一樣時(shí)刻获，會(huì)產(chǎn)生問(wèn)題
建議：不推薦使用，只建議高度固定的布局時(shí)使用
2斥滤，結(jié)尾處加空div標(biāo)簽 clear:both
原理：添加一個(gè)空div将鸵，利用css提高的clear:both清除浮動(dòng)，讓父級(jí)div能自動(dòng)獲取到高度
優(yōu)點(diǎn)：簡(jiǎn)單佑颇、代碼少顶掉、瀏覽器支持好、不容易出現(xiàn)怪問(wèn)題
缺點(diǎn)：不少初學(xué)者不理解原理挑胸；如果頁(yè)面浮動(dòng)布局多痒筒，就要增加很多空div，讓人感覺很不好
建議：不推薦使用茬贵，但此方法是以前主要使用的一種清除浮動(dòng)方法
3簿透，父級(jí)div定義 偽類:after 和 zoom
zoom:1避免元素高度崩塌
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點(diǎn)類似解藻，zoom(IE轉(zhuǎn)有屬性)可解決ie6,ie7浮動(dòng)問(wèn)題
優(yōu)點(diǎn)：瀏覽器支持好老充、不容易出現(xiàn)怪問(wèn)題（目前：大型網(wǎng)站都有使用，如：騰迅螟左，網(wǎng)易啡浊，新浪等等）
缺點(diǎn)：代碼多、不少初學(xué)者不理解原理胶背，要兩句代碼結(jié)合使用才能讓主流瀏覽器都支持巷嚣。
建議：推薦使用，建議定義公共類钳吟，以減少CSS代碼廷粒。
4，父級(jí)div定義 overflow:hidden
原理：必須定義width或zoom:1红且，同時(shí)不能定義height坝茎，使用overflow:hidden時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單直焙、代碼少景东、瀏覽器支持好
缺點(diǎn)：不能和position配合使用，因?yàn)槌龅某叽绲臅?huì)被隱藏奔誓。
建議：只推薦沒(méi)有使用position或?qū)verflow:hidden理解比較深的朋友使用斤吐。
5，父級(jí)div定義 overflow:auto
原理：必須定義width或zoom:1厨喂，同時(shí)不能定義height和措，使用overflow:auto時(shí)，瀏覽器會(huì)自動(dòng)檢查浮動(dòng)區(qū)域的高度
優(yōu)點(diǎn)：簡(jiǎn)單蜕煌、代碼少派阱、瀏覽器支持好
缺點(diǎn)：內(nèi)部寬高超過(guò)父級(jí)div時(shí)，會(huì)出現(xiàn)滾動(dòng)條斜纪。
建議：不推薦使用贫母，如果你需要出現(xiàn)滾動(dòng)條或者確保你的代碼不會(huì)出現(xiàn)滾動(dòng)條就使用吧文兑。
6，父級(jí)div 也一起浮動(dòng)
原理：所有代碼一起浮動(dòng)腺劣，就變成了一個(gè)整體優(yōu)點(diǎn)：
沒(méi)有優(yōu)點(diǎn)
缺點(diǎn)：會(huì)產(chǎn)生新的浮動(dòng)問(wèn)題绿贞。
建議：不推薦使用，只作了解橘原。
7籍铁，父級(jí)div定義 display:table
原理：將div屬性變成表格
優(yōu)點(diǎn)：沒(méi)有優(yōu)點(diǎn)
缺點(diǎn)：會(huì)產(chǎn)生新的未知問(wèn)題。
建議：不推薦使用趾断，只作了解
8拒名，結(jié)尾處加 br標(biāo)簽 clear:both
原理：父級(jí)div定義zoom:1來(lái)解決IE浮動(dòng)問(wèn)題，結(jié)尾處加 br標(biāo)簽 clear:both
建議：不推薦使用芋酌，只作了解增显。
7種三列布局
雙飛翼布局使用margin負(fù)值的原理
margin為負(fù)值產(chǎn)生的影響
對(duì)于自身的影響
當(dāng)元素不存在width屬性或者（width：auto）的時(shí)候，負(fù)margin會(huì)增加元素的寬度脐帝，看下下面的例子
margin-left:-20px;增加了寬度
為什么是供css讀取的高度甸怕？
那么試了之后上結(jié)果，
高度給出的是50腮恩，但是CSS能讀到的卻是高度的一半
對(duì)文檔流的影響
元素如果用了margin-left:-20px;毋庸置疑的自身會(huì)向左偏移20px和定位（position：relative）有點(diǎn)不一樣的是梢杭，在其后面的元素會(huì)補(bǔ)位，也就是后面的行內(nèi)元素會(huì)緊貼在此元素的之后秸滴∥淦酰總結(jié)，不脫離文檔流不使用float的話荡含，負(fù)margin元素是不會(huì)破壞頁(yè)面的文檔流咒唆。
對(duì)文檔流的影響
所以如果你使用負(fù)margin上移一個(gè)元素，所有跟隨的元素都會(huì)被上移释液。
對(duì)浮動(dòng)的影響全释，定義三個(gè)盒子,每個(gè)盒子寬高均是100如下
給三個(gè)盒子都加上margin-left:-25px;
margin-left: -25px;
可以看出3個(gè)盒子都向左移動(dòng)25px；
box1自身向左移動(dòng)了25px误债，box2又覆蓋了其25px浸船，所以我們就看到了“寬度”為50px的box1
box2，box3以此類推寝蹈！
那么margin-left：-50px呢?
第三個(gè)盒子margin-left：-200px時(shí)
總結(jié)：
負(fù)margin會(huì)改變浮動(dòng)元素的顯示位置李命，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面箫老。圣杯布局封字、雙飛翼布局啊什么的，都是利用這個(gè)原理實(shí)現(xiàn)的。（下文有詳細(xì)）
對(duì)絕對(duì)定位也是有影響的阔籽，負(fù)margin會(huì)基于其絕對(duì)定位坐標(biāo)再偏移流妻，缺點(diǎn)就是你必須知道這個(gè)絕對(duì)定位元素寬度的和高度才能并設(shè)置負(fù)margin值使其居中瀏覽器窗口，
若對(duì)于不確定寬度和高度可以用
1笆制、流體布局
/*實(shí)現(xiàn)方式
左右模塊各自左右浮動(dòng)合冀，并設(shè)置中間模塊的margin值使中間模塊寬度自適應(yīng)
缺點(diǎn)：主要的內(nèi)容模塊無(wú)法最先加載，當(dāng)頁(yè)面內(nèi)容較多時(shí)會(huì)影響用戶的體驗(yàn)
*/
2项贺、BFC三欄布局
/*缺點(diǎn)和流體布局的類似，主要內(nèi)容無(wú)法最先加載峭判，當(dāng)頁(yè)面中內(nèi)容較多時(shí)會(huì)影響用戶體驗(yàn)开缎。因此為了解決這個(gè)問(wèn)題，有了雙飛翼布局*/
3林螃、雙飛翼布局
/*利用的是浮動(dòng)元素margin負(fù)值的應(yīng)用（原理會(huì)在文章末給出）奕删，中間div最先寫*/
/*主題內(nèi)容優(yōu)先加載，HTML代碼結(jié)構(gòu)稍微復(fù)雜點(diǎn)*/
4疗认、圣杯布局
跟雙飛翼布局很像完残，有一些細(xì)節(jié)上的區(qū)別，相對(duì)于雙飛翼布局來(lái)說(shuō)横漏，HTML結(jié)構(gòu)相對(duì)簡(jiǎn)單谨设，但是樣式定義就稍微復(fù)雜點(diǎn)
5、Flex布局
x需要考慮瀏覽器的兼容性
6缎浇、table布局
缺點(diǎn)無(wú)法設(shè)置欄間距
7扎拣、絕對(duì)定位布局
簡(jiǎn)單實(shí)用，并且主要內(nèi)容優(yōu)先加載
///簡(jiǎn)書上編輯代碼真是O疼素跺，還是上圖更加更省事二蓝。(￣￣)~*
*******************************************************************************************
