首頁 > 文章 > web前端 > css中的浮動屬性值有哪些

css中的浮動屬性值有哪些

王林原創: 2021-02-24 16:28:355062瀏覽

css中的浮動屬性值有：left、right、none、inherit。 float浮動屬性可以使元素向左或向右移動，其周圍的元素也會重新排列，往往用於圖像佈局中。

css中的浮動屬性值有哪些

本文操作環境：windows10系統、css 3、thinkpad t480電腦。

浮動屬性介紹：

CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。 Float（浮動），往往是用於圖像，但它在佈局時一樣非常有用。

浮動屬性：

clear 指定不允許元素周圍有浮動元素（清除浮動）。

left
right
#both

# #none

inherit
#float 指定一個盒子（元素）是否可以浮動。
left
right

#none

inherit

css中的浮動屬性值有哪些

範例：

<style>
.thumbnail 
{
	float:left;
	width:110px;
	height:90px;
	margin:5px;
}
</style>
</head>

<body>
<h3>图片库</h3>
<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
<img  class="thumbnail" src="/images/klematis_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis2_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis3_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
<img  class="thumbnail" src="/images/klematis4_small.jpg"    style="max-width:90%"  style="max-width:90%" alt="css中的浮動屬性值有哪些" >
</body>
</html>

執行結果：

################################################################################################### ###相關推薦：###CSS教學######

以上是css中的浮動屬性值有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

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

上一篇：css引入本地圖片的方法是什麼下一篇：css引入本地圖片的方法是什麼

看更多