在网页中，元素有三种布局模型
文档流（Flow）
层模型（Layer）
浮动模型（Float）
1、文档流
特点：默认网页布局模型，块元素自上而下按顺序垂直分布（独占一行），行内元素从左到右水平分布显示。
2、层模型
特点：三种形式 1， 相对定位（position：relative） 2，绝对定位（position：absolute）3，固定定位（position：fixed）
3、浮动模型
特点：float设置不同浮动的效果（right，left）
深入了解：
相对定位
设置position：relative表示相对定位，没有脱离文档流。通过left，right，top，bottom属性确定元素在正常文档流中偏离的位置，相对于元素初始的位置移动，偏移前的位置保留不动。就算元素被偏移了，但是他仍然占据着他没有偏移的空间。
绝对定位
设置position:absolute表示绝对定位，脱离文档流。通过left，right，top，bottom属性相对于最近的一个具有定位的父级进行定位，如果没有则相对于文档定位。
固定定位
fixed表示固定定位，相对于视图定位，他不会随浏览器窗口的滚动条滚动而变化，不会受文档流的影响。
z-index
z-index属性适用于定位元素（position属性值为relative、absolute 或fixed，如果元素没有定位，对其设置z-index是无效的）为了表示三维立体的概念如显示元素的上下层的叠加顺序而引入了z-index属性来表示z轴的区别。z-index值较大的元素叠加在z-index值较小的上面。对于未指定此属性的定位对象，z-index值为正数第对象在其之上，而为负数的对象在下面。
浮动元素
浮动元素的定位还是基于文档流定位的，只是改变了文档流的显示，并没有脱离文档流。
所有产生了浮动流的元素块级元素都看不到他们。文本属性（inline）元素以及文本元素和产生了BFC的元素可以看得到浮动元素。
案例1：父级自适应包住子级（子级是浮动元素）
<body>
<div class=”wrapper”>
<div class=”content”>1</div>
<div class=”content”>2</div>
<div class=”content”>3</div>
</div>
</body>
.wrapper{
border: 1px solid black;
}
.content{
float: left;
background-color: orange;
width: 100px;
height: 100px;
}
父级是块元素看不到浮动元素。怎么拿父级包住浮动的子级？
方法一：（可以实现，但不推荐）手动加高度。
方法二：清除浮动流。
伪元素清除浮动
.wrapper::after{
content:””;
display:block;/*伪元素天生是行级元素，改成block才生效*/
clear:both;
}
方法三：父级元素设置成BFC
.wrapper{
/*不是紧紧包裹子元素，宽度很宽*/
/*overflow: hidden;*/
/*下面三种方法是紧紧包裹住子元素*/
/*display: inline-block;*/
/*float: left;*/
/*position: absolute;*/
border: 1px solid black;
}
凡是设置了position:absolute 或者float:left/right 打内部把元素转换成了inline-block。
案例2：实现报纸类布局。img设置float属性，实现文字环绕图片效果。
.img{
float: left;
margin-right: 10px;
}
