以下纯属个人思考和臆测，如果错误还望指出：
html诞生了，随之诞生的是css，css的生命是html给的，它为了更好的服务html，也为了更加规范化自己的行为，搞出了很多骚套路。
在css看来，html的主要工作就是呈现，而css的自己的作用就是让html更好的呈现，抬高html的档次，提升html的逼格。那么如果提升html的逼格呢？css自己做了很多的思考。
这里提一点就是，在html中重点是标签，在css中重点是元素，元素这个词好呐，可以有形也可以无形；主要分四类：块级的，行级的，行块级的和文本级（这里我个人分为四类，应为在css看来，文字是很特别的，或许是html产生之初，大部分页面是文字，所以css也对文字情有独钟吧，佐证就是css有很多的font、text属性）。
理解css中的元素，无非就从两个方面，那就是元素的两个特特特特特别的属性：位置（position，float，flex）和样式（这里的样式，我认为是包含了长宽高元素自身的大小和狭义样式的广义样式，自己瞎胡定义的，就是理解用的）。
有了两个属性，随之产生3个称谓2个关系，自己，兄弟，父亲（上边提到的样式就是自己，自己和兄弟元素的位置关系，自己和父级元素的位置关系）。
样式没什么好讲的，就是元素装点门面用的，给个底色了，长点了，宽点了，就是浓妆淡抹总相宜。位置属性最为特殊，因为html就是元素间的位置堆砌出来的嘛，这里重点讲一下float这个属性，这个东西很特别，特殊在它脱离了文档流，但是却仍然还在第0层。有个例子就是文字环绕图片：
<html>
<head>
<style type="text/css">
.div1{
float: left;
width: 100px;
background-color: #0f0;
word-break: break-all;
}
.div2{
width: 200px;
background-color: #00f;
word-break: break-all;
}
</style>
</head>
<body>
<div class = "div1">
aaaaaaaaaaaaaaaaaaa我被环绕了aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class = "div2">
1234567890qwertyuioplkjhgfdsazxcvbnm
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</body>
</html>跑一下，试一试，是不是看到文字围绕上边的div1进行分布了，首先呢，文本是在下面div2中的，它肯定还在第0层文档流中，但是它围绕具有float属性的div分布，所以div1肯定也是在第0层。但是它确实已经跳出了文档流了，理由就是div1和div2是有重叠。div2占据了div1的位置并在div1的空间下面。这里就是有意思的地方。这里首先说明文本在css中是很特殊的元素，像水一样，形状可塑；还就有一点就元素所在的第0层其实是包含两层级（z-index=0这一层），一个是文档流，一个是float样式形成的一层。而文本元素是横跨文档流和float层。
不知道能否get到我说的重点。
