元素有三种布局模型：
1、流动模型（Flow）：默认就是流动模型。
- 第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。
- 第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（内联元素可不像块状元素这么霸道独占一行）
2、浮动模型 (Float)：float:left; 左浮动。任何元素在默认情况下是不能浮动的，但可以用 CSS 定义为浮动，如 div、p、table、img 等元素都可以被定义为浮动。
3、层模型（Layer）：让html元素在网页中精确定位，图层的感觉。层模型有三种定位方法，position，绝对的 相对的 固定的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模型</title>
<style type="text/css">
/* 浮动模型 float */
div {
border: 2px red solid;
width: 200px;
height: 300px;
}
#div1{float:left;}
#div2{float:left;}
</style>
</head>
<body>
<h2>流动模型</h2>
<p>默认就是流动模型</p>
<hr><br>
<h2>浮动模型</h2>
<p>浮动模型的 div </p>
<div id="div1">栏目1</div>
<div id="div2">栏目2</div>
<hr><br><br>
<h2>层模型</h2>
<p>
什么是层布局模型？层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
<br><br>
层模型有三种形式：
<br>
1、绝对定位(position: absolute)
<br>
2、相对定位(position: relative)
<br>
3、固定定位(position: fixed)
</p>
</body>
</html>效果：
为啥层模型是在右边而不是在下面？？？
来自：html5+css3：https://www.imooc.com/learn/9
1585
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
