absolute
让我们再来回顾下absolute的意思
框从正常文档流中删除（我退出分地，接下来的人可以分这块地），相对于其包含块定位（从父块一直向上找，找到一个不是static的包含块，相对于其定位）
用代码来解释下这段话
.father{
background-color: red;
width: 100px;
height: 100px;
margin-top: 50px;
/*position: relative;*/
}
.child{
background-color: yellow;
position: absolute;
top: -20px;
width: 50px;
height:50px;
}
<div class="father">
<div class="child"></div>
</div>
屏幕快照 2016-03-27 下午8.16.46.png
如图所示，我们在红色的父块里包含了一个黄色的小块，并且设置黄色子块position: absolute; top: -20px;它会相对于其包含块向上移动20px，但是我们看到，红色子块其实是相对于body移动的，这是因为其父块是static的，我们将/position: relative;/这句代码打开
屏幕快照 2016-03-27 下午8.16.28.png
由于红色父块被设置为relative，黄色子块相对于红色父块上移20px。
fixed
position类似于absolute，但是包含块直接设置为浏览器窗口
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.static{
background-color: yellow;
width: 100px;
height: 100px;
}
.fixed{
position: fixed;
bottom: 20px;
background-color: red;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div class="static"></div>
<div class="fixed"></div>
</body>
</html>
拖动浏览器的窗口，红块会随之移动
float 浮动
浮动的框会向左向右移动，直到它的边缘碰到包含框或另一个浮动框的边框为止
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<style>
ul{
list-style: none;
}
li{
float: left;
}
</style>
<title></title>
</head>
<body>
<ul>
<li><span>111</span></li>
<li><span>222</span></li>
<li><span>333</span></li>
<li><span>444</span></li>
</ul>
</body>
</html>
屏幕快照 2016-03-27 下午9.32.38.png
li是块级标签，本来应该由上到下排列，但是设置了float: left以后，第一个li向左移动碰到包含框ul，第二个li碰到第一个li的右边停止，依次排列。
很惭愧，只做了些微小的工作，谢谢大家！
网友评论