布局
文档流
所谓文档流就是按照元素的顺序从左到右、由上而下的方式排列。
定位
默认的文档流很多时候不能满足我们的布局要求，需要更丰富的布局手段，这就需要用到定位了。定位方式有：static、fixed、relative、absolute。
Static静态定位（默认）
无定位，元素正常出现在文档流中
不受left，right，top，bottom的影响
Relative相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style>
div{
width: 200px;
height: 200px;
}
.div1{
background-color: green;
}
.div2{
position: relative;
left: 50px;
top: 20px;
background-color: red;
}
.div3{
background-color: yellow;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>
Absolute绝对定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
div{
width: 200px;
height: 200px;
border: 1px black solid;
position: relative;
}
#div21{
background-color: green;
}
#div22{
background-color: yellow;
position: absolute;
top:20px;
left:30px;
}
#div23{
background-color: red;
}
</style>
<body>
<div id="div1"></div>
<div id="div2">
<div id="div21"></div>
<div id="div22"></div>
<div id="div23"></div>
</div>
</body>
</html>
z-index
重新定位之后可能会出现重叠，通过z-index可以调整其顺序。z-index默认值为auto，即与父元素相同，可以设置为数值，数值大的层位于相对小的上方。
定位总结
（1）标准文档流按照从左到右、自上而下的方式依次排列元素。若要改变默认布局方式则需使用relative、absolute、fixed等定位方式；
（2）relative是相对于其原有位置进行偏移；
（3）absolute是相对于其父容器进行偏移，注意其父容器必须是有定位的，即非默认（static）定位方式，否则会一直往上追溯，直到页面；
（4）fixed是相对于整个页面进行偏移。
（5）relative不会从标准流脱离，而absolute和fixed都从标准流中脱离出来
浮动
通过设定浮动（float），可以使得元素从原本的文档流中脱离出来，感觉像浮在原本的文档流上面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style>
#div1,#div5{
width: 500px;
height: 100px;
background-color: skyblue;
}
#div2,#div4{
width: 100px;
height: 300px;
background-color: silver;
float: left;
}
#div3{
width: 300px;
height: 300px;
background-color: greenyellow;
float: left;
}
</style>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
</body>
</html>
显示效果
从结果中可以看出，div5不见了，实际上div是被浮动的div2、div3、div4给覆盖了，可以通过调试工具查看到。
如何让div5能够正常显示呢？
需要清除浮动，在div4后增加一个div，并设置其样式为清除浮动
#clear{
clear: left;
}