这里我们先简单的说一下“文档流”。就是把一个页面看做一个河流，里面的所有元素，具有向着某个特定方向流动的趋势。
打一个最简单的比方，现在页面中有三个段落，那么它们从上往下排布。如果我在代码中彻底删掉第一段，那么剩下的两段会怎样呢？
答案当然是它们会向上移动到页面的最顶端，这在我们看来是理所当然的。
这就是第一个规律，文档中所有内容，默认都具有一个尽量靠上的趋势。这就是把我们认为理所当然的东西，用语言归纳表达了一下。
那么在一行文字里，也是一样的，不过除了有一个向上的趋势，还都有一个向左的趋势。想一想也很容易理解，对吧？
这就是基本的文档流。
虽然上面都能够听得懂，但是用这些刚刚接触到的专业术语去讲，就会显得越来越复杂。所以我们干脆讲一个故事：
某一天，小老鼠的书写出来了，进行签售。那场面万人空巷。不是吓跑了，是都过来抢购了。
那么现在假设图书签售的摊位，位于网页的左上角。人们都朝着这个方向蜂拥而来，当然，如果自己前面堆满了人，虽和摊位还有一定距离，但确实已经无法前进了，只能站在原地排队等候。这就是大家都有朝着某个方向前进的趋势，但是如果前面已经堆满了人，那么实际大家都是静止不动的。（都在一边排队，一边抱怨，这个队伍为什么一直都没有动？
当然这么混乱着不是办法，于是，我们就要维持秩序，大家排队吧，从页面的左侧一直排到右侧，折回来排第二队……这种大排长龙的景象，大家应该都见过。
● ←这个圆点就是小老鼠签售的摊位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 ……这些是排队的人群
好了，到目前秩序井然。不过也有外地来的朋友，是组团的，作为一个团体，他们不希望走散了。所以这些人非常连贯的排在了一起，队长站在最前面，副队长站在最后面，这样就不容易走散。
但是他们并不会有什么特权，也是和大家一样的排队。这就是行内元素。
● ←这个圆点就是小老鼠签售的摊位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 队长 20 21 22 23 24 副队 26 27 28 ……这些是排队的人群
这些身着粉色队服的，他们是一个团队，这个整体就是一个行内元素。队长是元素的开始标签，副队长是元素的结束标签，
但是现在出来了一些意外情况，某大公司，决定集体出来购买图书，作为公司的福利。虽然说他们也会按顺序排队，但是因为自己这边人多，为了便于管理，就希望和其他人划清界限。
比如说他们到来之后，并没有紧紧的贴在队尾。而是在队尾后面单独开始排队，一个属于他们自己的队伍。当然，他们的队尾，也不允许不属于他们公司的人员进入。
● ←这个圆点就是小老鼠签售的摊位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 队长 20 21 22 23 24 副队 26 27 28这里是一个公司，他们没有插队。但是为了和其他人区分，所以前后并没有和队伍进行衔接。这就是一个块元素，努力的和前后区分开，独自占据整个宽度。n n+1 n+2 ……这些是排队的人群
换句话说，他们很遵守秩序。只是把自己的前后和其他人进行一个分隔，避免混乱。
在公司的内部，还分有许多的部门，虽然每个部门都集中在一起，但是同属于一个公司，就没必要像和外人那样分隔的那么明显，所以他们也连贯的排在一起。
● ←这个圆点就是小老鼠签售的摊位
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 队长 20 21 22 23 24 副队 26 27 28队长 1 2 3 4 5 副队 队长 1 2 3 4 5 副队 队长 1 2 3 4 5 副队 企业内部的三个部门，按照顺序排队。可以说这个企业，就是这个巨大队伍中独立出来的一个小的队伍。n n+1 n+2 ……这些是排队的人群
再说一遍，其中每个小团队，他们整体上是一个行内元素；这个公司在整体上，是一个块级元素。
那么块级元素中可以放行内元素，而行内元素中不可以放块级元素（放不下的呀。
暂无评论内容