1.原來在一行中的兩個塊，會因為瀏覽器視窗的大小改變而改變其原來的位置（變成多行），瀏覽器視窗寬度不夠容納
解決方法：加個父div,並且設定寬度

.father {
width:500px;
height:300px;
}
<div class="father">
   <div class="left">左</div>
   <div class="right">右</div>
</div>



2.清除浮動clear
當元素有浮動屬性時，會對其父元素或後面的元素產生影響，出現一個佈局錯亂的現象。

none:預設值。允許兩邊有浮動物件
left：不允許左邊有浮動物件
right：不允許左邊有浮動物件
both：左右兩側不允許有浮動物件

當父元素沒有指定高度時

(1)額外標籤法（末尾加個空盒子）
W3C建議在容器的末尾增加一個“clear:both”的元素，強迫容器適應它的高度以便裝下所有的float元素

.father {
width:500px;
clear:both;
}
<div class="father">
   <div class="left">左</div>
   <div class="right">右</div>
   <div class="clear"></div> 增加一個空div
</div>

(2)溢位的使用(overflow)
給父盒子加個 overflow:hidden屬性

(3)絕對定位和相對定位
position:absolute;relative;fixed(固定在頁面某個位置)
絕對定位：將物件從文件流中分離出來，通過設定left,right,top,bottom四個方向相對於父級物件進行絕對定位。如果不存在這樣的父物件，則依據body物件

相對定位與絕對定位
絕對定位是父元素為基準點，進行定位---會脫離文件流
相對定位是根據其自身為基準點，進行定位---離開原位置，但還佔著原來空間

當我們想要使用絕對定位時：必須要有兩個條件
1.必須給父元素加定位屬性，一般建議使用position:relative;
2.給子元素加絕對定位position:absolute;同時要加方向屬性

#main ｛
width:700px;
margin:0 auto;
background:pink;
overflow:hidden;
position:relative;
｝

#left ｛
width:200px;
height:200px;
background:red;
position:absolute;
top:100px;
left:-100px;
｝

(4)偽物件after清除浮動，網上最流行(相當於在父盒子尾部加個隱藏的div）
.clearFix:after{
clear:both;
display:block;
visibility:hidden;
height:0;
line-height:0;
content:"";
}


<div class="father clearFix">
   <div class="left">左</div>
   <div class="right">右</div>
   <div class="clear"></div> 增加一個空div
</div>

cursor:pointer;