溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

CSS中的clear屬性怎么使用

發(fā)布時(shí)間：2022-04-22 14:11:13 來(lái)源：億速云 閱讀：177 作者：iii 欄目：大數(shù)據(jù)

這篇文章主要介紹“CSS中的clear屬性怎么使用”的相關(guān)知識(shí)，小編通過(guò)實(shí)際案例向大家展示操作過(guò)程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“CSS中的clear屬性怎么使用”文章能幫助大家解決問(wèn)題。

在CSS中clear屬性妙用

在DIV+CSS設(shè)計(jì)網(wǎng)頁(yè)中，經(jīng)常需要設(shè)置多個(gè)DIV并列排列，往往是使用float:left或float:right來(lái)實(shí)現(xiàn)，但問(wèn)題出現(xiàn)了，當(dāng)前面并列的多個(gè)DIV總寬度不足100%，下面的的DIV就很可能向上提，和上一行的并列的DIV在同一行，這不是我們想要的結(jié)果。使用Clear屬性正好可以解決這一問(wèn)題，下面引用幫助的介紹：

CSS clear屬性

圖片和文字元素出現(xiàn)在另外元素中，那么它們(圖片和文字)可稱(chēng)為浮動(dòng)元素(floatingelement)。使用clear屬性可以讓元素邊上不出現(xiàn)其它浮動(dòng)元素。

注意：當(dāng)這個(gè)屬性隨著"float"屬性一起使用的話(huà)，那么結(jié)果可能會(huì)不盡如人意。

Inherited:No

繼承性：無(wú)

舉例

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <htmlxmlnshtmlxmlns="http://www.w3.org/1999/xhtml"> <head> <metahttp-equivmetahttp-equiv="Content-Type"content="text/html;charset=utf-8"/> <title>無(wú)標(biāo)題文檔</title> <styletypestyletype="text/css"> .LeftText{  margin:3px;  float:left;  height:180px;  width:170px;  border:1pxsolid#B1D1CE;  background-color:#F3F3F3;  }   .FootText{  height:180px;  }   .Clear  {  clear:both;  }  </style> </head>  <body> <divclassdivclass="LeftText">區(qū)塊1</div> <divclassdivclass="LeftText">區(qū)塊2</div> <divclassdivclass="Clear"></div> <divclassdivclass="FootText">區(qū)塊3</div> </body> </html>

代碼說(shuō)明：

如果沒(méi)有Clear這一層，“區(qū)塊3”會(huì)緊接區(qū)塊2并列在同一行。

加了Clear這一層后，會(huì)把上面的浮動(dòng)DIV的影響清除，使其不至影響下面DIV的布局

關(guān)于“CSS中的clear屬性怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手