1 使用空標(biāo)簽清除浮動(dòng) 這種方法通過(guò)在浮動(dòng)元素之后添加一個(gè)帶有clearboth屬性的空標(biāo)簽來(lái)清除浮動(dòng)示例代碼ltbr style=quotclearbothquot 或者 ltdiv style=quotclearbothquotltdiv2 使用overflow屬性 通過(guò)給包含浮動(dòng)元素的父容器設(shè)置overflowauto或overflowhidden屬性，可以清除浮動(dòng)這種方法避免了增加。

HTML清除浮動(dòng)的方法步驟如下1首先，制作一個(gè)簡(jiǎn)單的HTML頁(yè)面，找到父級(jí)元素，將父級(jí)元素添加上邊框2然后，將父級(jí)元素添加上邊框后，發(fā)現(xiàn)父級(jí)元素沒(méi)有被子元素的高度所撐開(kāi)，保持標(biāo)簽的高度3在HTML頁(yè)面上，將最后一個(gè)浮動(dòng)元素的后面添加上div，設(shè)置其類型為clearboth4設(shè)置完成后，將浮動(dòng)。

這代碼本身沒(méi)有問(wèn)題樓主所說(shuō)的清除浮動(dòng)，是要實(shí)現(xiàn)什么效果呢樓主希望的是這樣的效果lt！DOCTYPE html PUBLIC quotW3CDTD XHTML 10 TransitionalENquot quotDTDxhtml1transitionaldtdquot lthtml xmlns=quot lthead ltmeta。

通過(guò)設(shè)置CSS的float屬性為left或right，可以控制元素向左浮動(dòng)還是向右浮動(dòng)這使得元素能夠按照設(shè)計(jì)需求，在水平方向上進(jìn)行定位浮動(dòng)元素對(duì)其他元素的影響浮動(dòng)元素不會(huì)影響它下面的非浮動(dòng)元素的位置，但會(huì)影響與其并排的其他元素這是因?yàn)楦?dòng)元素已經(jīng)脫離了常規(guī)文檔流，不再占據(jù)原來(lái)的空間清除浮動(dòng)由于。

給浮動(dòng)元素的父容器添加 overflowhidden 或 overflowauto 或者 overflow scroll ，也可以清除浮動(dòng)在浮動(dòng)的元素后面同一層級(jí)，增加一個(gè)新標(biāo)簽，比如 ltdiv class=quotclearquotltdiv ，然后在這個(gè)空元素里面設(shè)置 clear both 清除浮動(dòng)當(dāng)然這樣的話，就會(huì)增加無(wú)用的標(biāo)簽，使得html變得冗余。

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

清除浮動(dòng)，顧名思義就是clearboth，這的確是一種方法，但是要確定我們的clearboth是應(yīng)用在哪里47 我們可以在html頁(yè)面上，最后一個(gè)浮動(dòng)元素的后面，添加一個(gè)div，并設(shè)置其style為clearboth57 我們還可以為浮動(dòng)的元素的父級(jí)元素添加偽類，*aftercontentquotquot displayblock clearboth。

方法2清除浮動(dòng)的最大問(wèn)題是 divcontent 不能設(shè)置 margintop 無(wú)效于是就有了外墻隔離法圖片上傳失敗imaged292db3于是就有了新的演變 內(nèi)墻元素隔離法把元素放在外面， 影響 HTML 結(jié)構(gòu)于是有人干脆把”隔離元素”放在內(nèi)部圖片上傳失敗imagee6f2793。

1利用clear樣式清除浮動(dòng)，在父元素的最后添加一個(gè)空白的div，它可以撐開(kāi)父元素的高度，然后對(duì)其清除浮動(dòng)2利用after偽類可以通過(guò)after偽類去除浮光點(diǎn)。

在實(shí)際開(kāi)發(fā)中，清除浮動(dòng)最常用的方法是使用clearboth例如，當(dāng)一個(gè)容器中包含多個(gè)浮動(dòng)元素，而容器本身需要保持清晰的邊界時(shí)，就需要應(yīng)用clearboth來(lái)清除浮動(dòng)以下是一個(gè)示例HTML 代碼創(chuàng)建一個(gè)寬度為500px的盒子，內(nèi)部包含兩個(gè)寬度為200px的浮動(dòng)盒子一個(gè)浮動(dòng)到右邊，一個(gè)浮動(dòng)到左邊盒子本身?yè)碛小?/p>

清除浮動(dòng)是為了恢復(fù)被浮動(dòng)元素影響的標(biāo)準(zhǔn)流布局，通常因?yàn)楦?dòng)元素導(dǎo)致父元素高度塌陷解決方法包括直接設(shè)置父元素高度使用額外標(biāo)簽單偽元素清除法以及雙偽元素清除法，其中給父元素設(shè)置overflow hidden是簡(jiǎn)便的方法清除浮動(dòng)是為了保持網(wǎng)頁(yè)整體布局的穩(wěn)定性和協(xié)調(diào)性以上內(nèi)容總結(jié)了HTMLJS前端中CSS布局。