浮动float
float是一个非标准流，即不按常规进行布局
例 当建立两个div
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
}
.div2{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
</body>
</html>
结果应如下
给div1加个float后，就变成了如下
代码：
.div1{
width: 200px;
height: 200px;
background-color: red;
float: left;
}
结果
虽然只显示一个div 但其实这个既是div1，又是div2
只是因为div1加了浮动后变成了非标准流，而盒子中其它标准流视浮动盒子不存在而占据了它的位置，但内容会受到浮动盒子宽度的影响
消除浮动的方法
-clear:left /right/both 消除左浮动/右浮动/两边
清除浮动影响方式
-增加兄弟块元素
-通过伪类：after清除浮动的影响
定位position
1.相对定位 relative
相对于原来本身的位置定位，其所占的空间位置保留
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
color: white;
position: relative;
top: 50px;
right: 30px;
}
</style>
</head>
<body>
<div class="div1">gggg</div>
</body>
</html>
div以自身为参考偏移，其结果如下
2.绝对定位 absolute
相对于离它最近的有定位的元素定位（如果父元素有定位，就相对于父元素定位，如果没有，相对于整个页面定位）
一般的，如果一个元素要使用绝对定位，则先给它的父元素一个相对定位（不用写top和left），再用绝对定位
例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
color: white;
position: absolute;
top: 50px;
left: 30px;
}
</style>
</head>
<body>
<div class="div1">gggg</div>
</body>
</html>
3.固定定位 fixed
固定定位与绝对定位基本相似，但绝对定位随滚动条移动，而固定定位不随滚动条移动，所以称之为固定定位
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: red;
color: white;
position: fixed;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<div class="div1">gggg</div>
<p>h</p>
<p>h</p>
<p>h</p>
...
<p>h</p>
<p>h</p>
<p>h</p>
</body>
</html>
当滚动条在最上面时，结果如图，div距顶部50px
当滚动条向下滚动时，结果如下图，div距顶部依然是50px
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
