如何讓兩個div並排布局？__div

效果前：

效果後：

原因：div為區塊層級元素，獨佔一行

過程：1、當單獨對第一個div添加”float:left;”,會出現以下效果

分析：a、將div的寬高設定不同觀看效果。b、設定float後該div就好像在水平面跳出來的一張紙，而第二個div則在水平面上，呈現一種覆蓋的現象。所以要想兩個div並排，則在兩個div的樣式中都添加”float:left;”

2、當這兩個div後面接一個普通的div(即設定寬高和背景顏色而已)，

3、當我把第二個div設定右浮動，第一個設定左浮動，第三個不浮動，效果

原因是：三張紙，第一張和第二張紙是浮在水的上面，第三張是在水平面，而人從水的上方往下看，俯視圖的效果。正常的元素就排版在HTML頁面中，這個HTML就類似水平面，元素都按順序排列，所以第三張紙排在第一張的下面。

 

這有什麼副作用呢。

 下面的普通div被覆蓋

1、假如第三個div不想被第一個div覆蓋則再第三個div樣式中加”clear:left;”（即第三個div頭上不允許左浮動的div再上面）(--按我理解，應該是區塊層級元素的原因)

2、當第三個div樣式為：width:100%;clear:left;並且第二個div樣式為：height：200px；width:100px;