浮动的形象化记忆

刚接触css的浮动，感觉这块不好记忆，通过想象来强化记忆，就写了这篇博客

首先要知道文档流的概念
网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层来设置样式。作为用户来讲只能看到最顶上一层。这些层中，最底下的一层称为文档流，文档流是网页的基础。

浮动就是让元素脱离文档流，相当于气球飘到上方了。

浮动的特点：
1.浮动元素会完全脱离文档流，不再占据文档流中的位置
2.设置浮动以后元素会向父元素的左侧或右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高

形象化记忆：
我们把文档流中的元素想象成一堵墙，一个元素放在这个地方，那么所有的领空都是它的，气球也不能飘到它上面去
1.浮动元素会完全脱离文档流（气球拖离地面）
2.设置浮动以后元素会向父元素的左侧或右侧移动（空中的气球是有序排队的，从左向右排，从上向下排）
3.浮动元素默认不会从父元素中移出（父元素也是一堵墙，气球是出不去的）
4.浮动元素向左或向右移动时，不会超过它前边的其他浮动元素（空中的气球是有序排队的，从左向右排）
5.如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移（块元素是一堵墙）
6.浮动元素不会超过它上边的浮动的兄弟元素，最多就是和它一样高（气球有序排队，一排没排满可以排同一排，排满了就排后面一排，新来的气球只能从左向右排，这一排排不下了就会自动换下一行排）