首頁 > web前端 > css教學 > css怎麼樣清除浮動

css怎麼樣清除浮動

coldplay.xixi
發布: 2023-01-05 16:09:14
原創
3310 人瀏覽過

css清除浮動的方法是使用clear屬性清除浮動,clear屬性定義了元素的哪邊上不允許出現浮動元素,代碼為【img{float:left;clear:both;}】。

css怎麼樣清除浮動

本教學操作環境:windows7系統、css3版,DELL G3電腦。

css清除浮動的方法:

css可以使用clear屬性清除浮動。 clear屬性介紹如下:

clear屬性定義了元素的哪一邊上不允許出現浮動元素。在 CSS1 和 CSS2 中,這是透過自動為清除元素(即設定了 clear 屬性的元素)增加上外邊距來實現的。

在 CSS2.1 中,會在元素上外邊距之上增加清除空間,而外邊距本身並不會改變。不論哪一種改變,最終結果都一樣,如果宣告為左邊或右邊清除,會使元素的上外邊框邊界剛好在該邊上浮動元素的下外邊距邊界之下。

屬性值:

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

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

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

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

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

使用clear屬性清除浮動範例:

映像的左側和右側均不允許浮動元素:

<html>
<head>
<style type="text/css">
img
  {
  float:left;
  clear:both;
  }
</style>
</head>
<body>
<img  src="/i/eg_smile.gif" / alt="css怎麼樣清除浮動" >
<img  src="/i/eg_smile.gif" / alt="css怎麼樣清除浮動" >
</body>
</html>
登入後複製

效果圖:

css怎麼樣清除浮動

相關教學推薦:#CSS影片教學

以上是css怎麼樣清除浮動的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板