之前頁面佈局經常使用的是float+position，但是有個問題就是，給元素設置float會脫離文檔流，就相當於是在頁面中不再佔有位置，只是飄在該位置上面。
原理與position類似。
頁面效果：
期望效果：
實現代碼：
1.html：
<div class="contrainer">
<div class="div1">
<div class="left">Left</div>
<div class="right">Right</div>
</div>
<div class="div2">
div2
</div>
</div>
2.css：
.contrainer{
.div1{
background:#000080;
border:1px solid #ff0000;
// height:200px;
}
.div2{
background:#800080;
border:1px solid red;
height:100px;
margin-top:10px
}
.left{
float:left;
width:20%;
height:200px;
background:#DDD
}
.right{
float:right;
width:30%;
height:80px;
background:#DDD
}
}
正常頁面應該是下面這個樣子，
原因：
想要div1和div2垂直顯示，div1下的兩個div是並列顯示的，因此設置了浮動，但是設置之後由於脫離了文檔流，div2直接跳到上面了，div1及div1下的兩個div撐不起來。
所以需要對其他元素設置清除浮動，取消設置的浮動所對其他元素帶來的影響。
清除浮動原理：
就是需要實現雖然元素設置了浮動，但是還是需要佔有自己的位置，不能脫離文檔流。
清除浮動有哪些方式？比較好的方式是哪一種？
（1）父級div定義height。
（2）結尾處加空div標籤clear:both。
（3）父級div定義僞類:after和zoom。
（4）父級div定義overflow:hidden。
（5）父級div定義overflow:auto。
（6）父級div也浮動，需要定義寬度。
（7）父級div定義display:table。
（8）結尾處加br標籤clear:both。
(Q2) 比較好的是第3種方式，好多網站都這麼用。