1.文档流
指的是文档中的标签在排列时所占用的位置，将窗体自上而下分成
一行行，并在每行中从左到右的顺序排放在标签，即为文档流。
（指的就是标签在网页中的默认排放顺序）
2.浮动
指的是使标签脱离原来的文档流，在父标签中浮动起来
float属性
行级标签浮动起来以后就是块级标签（可以设置宽高）
块级标签浮动起来以后，宽度会默认为默认为内容的宽度
任何标签都可以浮动
浮动带来的问题，高度塌陷 浮动元素没有将父级标签撑开
解决方案：1.设置高度撑开父标签
2.清除浮动影响 会自动将父标签撑开为浮动标签的高度
#nav_box>.nav{
float: left;
width: 200px;
background-color: cyan;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 15px;
font-weight: bold;
font-family: 楷书;
}
#nav_box{
width: 1200px;
margin: auto;
}
#nav_box>.nav:hover{
background-color: #0000FF;
}
<div id="nav_box">
<div class="nav">首页</div>
<div class="nav">关于我们</div>
<div class="nav">联系我们</div>
<div class="nav">时事新闻</div>
<div class="nav">时事热点</div>
<div class="nav">产品名称</div>
<div style="clear: left;"></div>
</div>
3.CSS定位
允许定义的标签相对于其正常位置，或者相对于父级标签，
另一个标签甚至浏览器窗口本身而出现的位置
定位：必须找准一个参照物
（1）相对定位
相对于原来的位置移动，移动后原来的位置还被占用（没有脱离文档流）
position:relative（开启相对定位）
开启了相对定位没有设置偏移量标签位置不动
与其他标签位置重叠时会提升一个层级，不会改变标签性质
.div1{
width: 100px;
height: 100px;
background-color: #008000;
position: relative;
left: 100px;
top: 10px;
}
.div2{
width: 100px;
height: 100px;
background-color: #0000FF;
}
<div class="div1">
div1
</div>
<div class="div2">
div2
</div>
4.绝对定位
posotion:absolute（开启绝对定位）
开启了绝对定位的标签就会脱离原来的文档流，没有设置偏移量，位置不变
绝对定位是以离他最近的开启了定位的祖先标签进行定位
这两个条件有一个不满足，就会以浏览器的窗口为参照物定位，会改变标签的性质
行级标签->块级标签
z-index 设置定位标签的层级 z轴
.div1{
width: 100px;
height: 100px;
background-color: #00FFFF;
position: absolute;
left: 100px;
top: 100px;
}
.div2{
width: 100px;
height: 100px;
background-color: #7FFF00;
}
.div{
width: 200px;
height: 200px;
background-color: red;
position: relative;
}
.div3{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 50px;
top: 50px;
}
span{
background-color: #F0E68C;
position: absolute;
width: 100px;
left: 100px;
}
<div class="div">
<div class="div1">
div1
</div>
<div class="div3">
div3
</div>
</div>
<div class="div2">
div2
</div>
<span>
span
</span>
aaa
5.固定定位
position:fixed
Processed:
0.010, SQL:
8
