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