如何让两个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;