<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .one{width: 250px; height: 250px;background: red;float: left;}.tow{ width: 300px; height: 200px; background:yellow;} .three{ width: 200px; height: 200px; background: pink; float: right;} </style> </head> <body> <div class="one"></div> <div class="tow"></div> <div class="three"></div> </body> </html>
效果圖：
我有點(diǎn)不明白為什么粉色的在最下面而且剛好頂部在黃色底部的水平線上。按照我的理解，粉色的應(yīng)該在最右端的上面。求解析?。?！
1.div默認(rèn)的display值是block。所以每一個(gè)div占據(jù)一行；2.float屬性只能讓你的內(nèi)容在原有位置上左右浮動(dòng)，并不會(huì)網(wǎng)上擠；3.如果想要實(shí)現(xiàn)樓主說的效果，可以給第二個(gè)div加上display:inline實(shí)現(xiàn)并排,或者使用position配合 left,right,top,bottom給div定位；4.樓主發(fā)代碼得排版好，少還好，多就沒人理你了。
你肯定會(huì)問那為什么第一個(gè)紅色的div就可以在第一行，那是因?yàn)閔tml代碼中紅色的div出現(xiàn)在了不浮動(dòng)的div前面，如果把不浮動(dòng)的第一個(gè)div寫在最前面，兩個(gè)浮動(dòng)的div都會(huì)出現(xiàn)在下面的第二行。
因?yàn)槟鉻ow的那個(gè)div就占了一行，所以右浮動(dòng)的那個(gè)div就會(huì)被擠到下面去了
因?yàn)闆]有浮動(dòng)的塊元素自己就占據(jù)了一行了啊，浮動(dòng)的元素在該行上就沒有空間了，所以就被擠下去了第二行了。
tow div是塊級(jí)元素，占了一整行 添加display: inline-block; 可以達(dá)到你想要的效果
哈哈哈~~~
加載中...