iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 5
0
Modern Web

挑戰 CSS 30 天系列 第 5

day5_float&clear

float (浮動) 屬性可達成文字繞著一個圖案顯現,可能的值為:left、right、和 none。
float:left; 使圖案浮動於左邊。
float:right; 使圖案浮動於右邊。
float:none; 使圖案不浮動。

clear (清除) 屬性可用來抵銷 float 屬性的作用。可能的值為:
left:消除左邊的浮動。
right:消除右邊的浮動。
both:消除左邊及右邊的浮動。
none:不消除任何一邊的浮動。

範例如下:

<!DOCTYPE html>
<html>
<head>
<title>CSS float&&clear</title>
<meta charset="utf-8">
<style type="text/css">
    #rightfloat { 
        float:right; 
    }
    #clearright { 
      clear:right; 
    }
</style>
</head>
<body>
    <span id="rightfloat"><img src="background.jpg"></span>這個例子
    <span id="clearright">展現出 clear:right 能夠抵銷 float 屬性的值。</span>
</body>
</html>

成果如下圖:https://ithelp.ithome.com.tw/upload/images/20171208/20106496OPOUCkbSR5.jpg


上一篇
day4_border 其他樣式
下一篇
day6_color
系列文
挑戰 CSS 30 天30

尚未有邦友留言

立即登入留言