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

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

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

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

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

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

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

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

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

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

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