css怎麼樣清除浮動-css教學-PHP中文網

css怎麼樣清除浮動

coldplay.xixi

發布： 2023-01-05 16:09:14

原創

3275 人瀏覽過

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中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

css怎麼樣清除浮動