首頁  >  文章  >  web前端  >  clear在css的用法是什麼

clear在css的用法是什麼

WBOY
WBOY原創
2022-04-15 15:24:196064瀏覽

在css中,clear屬性用於清除元素的浮動效果,該屬性可指定段落的左側或右側浮動元素的效果;預設屬性的值為none,表示允許浮動元素出現在兩側,也可設定元素的左側、右側或左右兩側不能有浮動元素,語法為「元素{clear:屬性值;}」。

clear在css的用法是什麼

本教學操作環境:windows10系統、CSS3&&HTML5版、Dell G3電腦。

clear在css中的用法是什麼

css中clear的作用是清除元素的浮動效果。

clear屬性指定段落的左側或右側不允許浮動的元素。

在 CSS1 和 CSS2 中,這是透過自動為清除元素(即設定了 clear 屬性的元素)增加上外邊距來實現的。在 CSS2.1 中,會在元素上外邊距之上增加清除空間,而外邊距本身並不會改變。

不論哪一種改變,最終結果都一樣,如果宣告為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。

clear屬性值:

  • eft 在左側不允許浮動元素。

  • right 在右邊不允許浮動元素。

  • both 在左右兩側均不允許浮動元素。

  • none 預設值。允許浮動元素出現在兩側。

  • inherit 規定應該從父元素繼承 clear 屬性的值。

範例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>123</title> 
<style>
img
{
float:left;
}
p.clear
{
clear:both;
}
</style>
</head>
<body>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="clear在css的用法是什麼" >
<p>This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</p>
<p class="clear">This is also some text. This is also some text. This is also some text. This is also some text. This is also some text. This is also some text.</p>
</body>
</html>

輸出結果:

clear在css的用法是什麼

(學習影片分享:css影片教學

以上是clear在css的用法是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn