HTML+CSS 輕鬆入門浮動...LOGIN

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>
#########下一節
<!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>
章節課件