實現(xiàn)效果如下，DIV2在div1的左方，其它代碼不變，我們只需要把浮動的代碼更改一下，就可以實現(xiàn)右浮動了，floatright下圖實際效果我們可以看到DIV實現(xiàn)了右浮動，浮動至右邊css浮動擴(kuò)展定義 浮動的框可以向左或向右移動。

1首先新建一個html文件，命名為testhtml2在testhtml文件內(nèi)，使用p標(biāo)簽創(chuàng)建兩行文字，代碼如下3在testhtml文件內(nèi)，設(shè)置第一個p標(biāo)簽id屬性為mp，主要用于下面使用css設(shè)置該p元素隱藏4在testhtml文件內(nèi)。

完美的封裝了popUpBox這個類 這個類一共兩個公開方法 show 顯示 hidden 隱藏 其他功能請自行擴(kuò)展 不敢保證簡單，但每一行都寫了注釋 lt！DOCTYPE htmlCSS 點(diǎn)擊文字或按鈕打開div浮動層 function popUpBox創(chuàng)建。

我是左側(cè)浮動窗口的內(nèi)容 我是右側(cè)浮動窗口的內(nèi)容CSS代碼body * * 為body標(biāo)簽設(shè)置背景僅僅是為了演示效果 * 與浮動窗口本身無關(guān) * backgroundcolor #ccc#left， #right position。

這種方式是在需要清除浮動的父級元素內(nèi)部的所有浮動元素后添加這樣一個標(biāo)簽清除浮動，并為其定義CSS代碼clearboth此方法的弊端在于增加了無意義的結(jié)構(gòu)元素對于使用額外標(biāo)簽清除浮動閉合浮動元素，是W3C推薦的做法。

不清除浮動的話，浮動層后面的非浮動內(nèi)容就有可能被浮動層所覆蓋，造成版面錯亂，所以必須清除浮動除非浮動層所在的位置是有固定的高度的，也就是說不管是否浮動它所占用的區(qū)域都不變，這樣就無需清除比如 可以看到。

Floatleft 靠左浮動Floatright 靠右浮動clearboth清除浮動，簡單舉例如下CSS樣式如下box1 floatleft width200px height300px background#f00* 設(shè)置div對象浮動靠左* box2 floatrightwidth。

清除浮動并不是指清除浮動元素本身的浮動，而是在浮動元素的外面前面或后面進(jìn)行清除，也就是清除浮動元素對其他后續(xù)元素的影響浮動元素相當(dāng)于漂浮在空中，那么它原來在地面所占用的位置就被收回了，后面的其他元素就會自動。

2li標(biāo)簽設(shè)置浮動時，圖片會重疊，無法排成一列浮動必須落實到圖片3小照片放在span標(biāo)簽中，變成了內(nèi)聯(lián)元素需為其添加quotdisplay blockquot轉(zhuǎn)換為塊級元素，才能設(shè)置圖片外邊距以下是代碼html view plain copy。

表示向左浮動，比如多個div在一個頁面上，默認(rèn)情況是一行一個div，但是只要在div的css中使用floatleft，可以使一行有多個div，這樣可以把網(wǎng)頁劃分成很多塊，但是使用該屬性會影響后面的元素，所有如果后面的div不想再被。

給div加上css樣式，分別給他們設(shè)置背景顏色，父div可以不設(shè)置，子div設(shè)置綠色，然后給div加上浮動代碼即可，quotfloatleftquot我們來寫一下代碼下面我們來看一下運(yùn)行效果 DIV是層疊樣式表中的定位技術(shù)，全稱DIVision，即為劃分。