HTML+CSS 輕鬆入門浮動(float)

什麼是浮動

        CSS 的 Float(浮動),會使元素向左或向右移動,周圍的元素也會重新排列。

        Float(浮動),通常用於影像,但它在佈局時一樣非常有用

##元素怎樣浮動

元素的水平方向浮動,表示元素只能左右移動而無法上下移動。


一個浮動元素會盡量向左或向右移動,直到它的外緣碰到包含框或另一個浮動框的邊框為止。

浮動元素之後的元素將圍繞它。

浮動元素之前的元素將不會受到影響。

如果圖像是右浮動,下面的文字流將環繞在它左邊

div{######    float:right;##########}# #####下面我們要做一個實例:例如有2個div,不同的背景###
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动</title>
	<style type="text/css">
		/*在这里会用到id选择器*/
		div{
			width:600px;
			height:600px;
			border:1px solid black;
		}

		#dv1{
			width:100px;
			height:100px;
			background-color:green;
			float:left;
		}

		#dv2{
			width:100px;
			height:100px;
			background-color:red;
			float:left;
		}

	</style>
</head>
<body>
	<div>
		<div id='dv1'></div>

		<div id='dv2'></div>
	</div>
</body>
</html>
#########
繼續學習
||
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*id*/
div{
width:600px;
height:600px;
border:1px solid black;
}
#dv1{
width:100px;
height:100px;
background-color:green;
float:left;
}
#dv2{
width:100px;
height:100px;
background-color:red;
float:left;
}
</style>
</head>
<body>
<div>
<div id='dv1'></div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
图片放大关闭