溫馨提示×

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

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

怎么使用clear屬性

發(fā)布時(shí)間：2020-07-13 09:22:25 來(lái)源：億速云 閱讀：175 作者：Leah 欄目：web開(kāi)發(fā)

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)怎么使用clear屬性，文章內(nèi)容豐富且以專(zhuān)業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

clear屬性設(shè)置元素左側(cè)或右側(cè)的元素不浮動(dòng)，可用于實(shí)現(xiàn)浮動(dòng)的清除，解決浮動(dòng)布局帶來(lái)的一些問(wèn)題。

CSS clear屬性

作用：clear屬性可以設(shè)置浮動(dòng)元素左右兩側(cè)的元素不浮動(dòng)。

語(yǔ)法：

clear：none | left | right | both;

none： 默認(rèn)值。允許浮動(dòng)元素出現(xiàn)在兩側(cè)。

left：在左側(cè)不允許元素浮動(dòng)。

right：在右側(cè)不允許元素浮動(dòng)。

both：在左右兩側(cè)均不允許元素浮動(dòng)。

CSS clear屬性的使用示例

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
}
.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>
<h3>不使用clear清除浮動(dòng)</h3>
<div class="div1">div1</div>
<div class="div2">div2 - 測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！</div>
<p>注意，在HTML代碼中，div2在div1之后。但是，由于div1向左浮動(dòng)，所以div2中的文本圍繞div1流動(dòng)。</p>
<br><br>
<h3>使用clear清除浮動(dòng)</h3>
<div class="div3">div3</div>
<div class="div4">div4 - 測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！測(cè)試文本！ </div>
<p>
說(shuō)明：使用clear: left;將div4向下移動(dòng)到浮動(dòng)div3下面；值“Left”清除浮動(dòng)到左側(cè)的元素。我們還可以使用clear屬性的“right”和“both”值。</p>
</body>
</html>

效果圖：

怎么使用clear屬性

上述就是小編為大家分享的怎么使用clear屬性了，如果剛好有類(lèi)似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。

向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
助
手