前段時間用到了這些東西，學習順便整理在了一起，清楚浮動幾種方法沒有試，有時間再深入學習一下。
*************************
八種清楚浮動的方式
1，父級div定義 height
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、代碼少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用
2，結尾處加空div標簽 clear:both
原理：添加一個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、代碼少、瀏覽器支持好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
3，父級div定義 偽類:after 和 zoom
zoom:1避免元素高度崩塌
原理：IE8以上和非IE瀏覽器才支持:after，原理和方法2有點類似，zoom(IE轉有屬性)可解決ie6,ie7浮動問題
優點：瀏覽器支持好、不容易出現怪問題（目前：大型網站都有使用，如：騰迅，網易，新浪等等）
缺點：代碼多、不少初學者不理解原理，要兩句代碼結合使用才能讓主流瀏覽器都支持。
建議：推薦使用，建議定義公共類，以減少CSS代碼。
4，父級div定義 overflow:hidden
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
5，父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、代碼少、瀏覽器支持好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的代碼不會出現滾動條就使用吧。
6，父級div 也一起浮動
原理：所有代碼一起浮動，就變成了一個整體優點：
沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作了解。
7，父級div定義 display:table
原理：將div屬性變成表格
優點：沒有優點
缺點：會產生新的未知問題。
建議：不推薦使用，只作了解
8，結尾處加 br標簽 clear:both
原理：父級div定義zoom:1來解決IE浮動問題，結尾處加 br標簽 clear:both
建議：不推薦使用，只作了解。
7種三列布局
雙飛翼布局使用margin負值的原理
margin為負值產生的影響
對于自身的影響
當元素不存在width屬性或者（width：auto）的時候，負margin會增加元素的寬度，看下下面的例子
margin-left:-20px;增加了寬度
為什么是供css讀取的高度？
那么試了之后上結果，
高度給出的是50，但是CSS能讀到的卻是高度的一半
對文檔流的影響
元素如果用了margin-left:-20px;毋庸置疑的自身會向左偏移20px和定位（position：relative）有點不一樣的是，在其后面的元素會補位，也就是后面的行內元素會緊貼在此元素的之后。總結，不脫離文檔流不使用float的話，負margin元素是不會破壞頁面的文檔流。
對文檔流的影響
所以如果你使用負margin上移一個元素，所有跟隨的元素都會被上移。
對浮動的影響，定義三個盒子,每個盒子寬高均是100如下
給三個盒子都加上margin-left:-25px;
margin-left: -25px;
可以看出3個盒子都向左移動25px；
box1自身向左移動了25px，box2又覆蓋了其25px，所以我們就看到了“寬度”為50px的box1
box2，box3以此類推！
那么margin-left：-50px呢?
第三個盒子margin-left：-200px時
總結：
負margin會改變浮動元素的顯示位置，即使我的元素寫在DOM的后面，我也能讓它顯示在最前面。圣杯布局、雙飛翼布局啊什么的，都是利用這個原理實現的。（下文有詳細）
對絕對定位也是有影響的，負margin會基于其絕對定位坐標再偏移，缺點就是你必須知道這個絕對定位元素寬度的和高度才能并設置負margin值使其居中瀏覽器窗口，
若對于不確定寬度和高度可以用
1、流體布局
/*實現方式
左右模塊各自左右浮動，并設置中間模塊的margin值使中間模塊寬度自適應
缺點：主要的內容模塊無法最先加載，當頁面內容較多時會影響用戶的體驗
*/
2、BFC三欄布局
/*缺點和流體布局的類似，主要內容無法最先加載，當頁面中內容較多時會影響用戶體驗。因此為了解決這個問題，有了雙飛翼布局*/
3、雙飛翼布局
/*利用的是浮動元素margin負值的應用（原理會在文章末給出），中間div最先寫*/
/*主題內容優先加載，HTML代碼結構稍微復雜點*/
4、圣杯布局
跟雙飛翼布局很像，有一些細節上的區別，相對于雙飛翼布局來說，HTML結構相對簡單，但是樣式定義就稍微復雜點
5、Flex布局
x需要考慮瀏覽器的兼容性
6、table布局
缺點無法設置欄間距
7、絕對定位布局
簡單實用，并且主要內容優先加載
///簡書上編輯代碼真是O疼，還是上圖更加更省事。(￣￣)~*
*******************************************************************************************
