<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>普通文档流</title>
</head>
<body>
<div>1 2 3</div>
<div>4 5 6</div>
<p>7 8 9</p>
<div>10 11 12</div>
<div>13 14 15</div>
<div>16 17 18</div>
<h1>19 20 21</h1>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
<span>22 23 24</span>
</body>
</html>
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
div {
width: 300px;
height: 300px;
}
.one{
background-color:red;
float:left;/* none | right | left */
}
.two{
width:350px;
background-color:green;
}
.three{
background-color:blue;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
一些皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
CSS的几种定位机制
普通文档流
浮动
绝对定位、相对定位、固定定位
普通文档流
块级元素单独占一行，行内元素放在一行，从上到下排布。
