刚接触css的浮动,感觉这块不好记忆,通过想象来强化记忆,就写了这篇博客
首先要知道文档流的概念
网页是一个多层的结构,一层摞着一层,通过CSS可以分别为每一层来设置样式。作为用户来讲只能看到最顶上一层。这些层中,最底下的一层称为文档流,文档流是网页的基础。
浮动就是让元素脱离文档流,相当于气球飘到上方了。
浮动的特点:
1.浮动元素会完全脱离文档流,不再占据文档流中的位置
2.设置浮动以后元素会向父元素的左侧或右侧移动
3.浮动元素默认不会从父元素中移出
4.浮动元素向左或向右移动时,不会超过它前边的其他浮动元素
5.如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移
6.浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高
形象化记忆:
我们把文档流中的元素想象成一堵墙,一个元素放在这个地方,那么所有的领空都是它的,气球也不能飘到它上面去
1.浮动元素会完全脱离文档流(气球拖离地面)
2.设置浮动以后元素会向父元素的左侧或右侧移动(空中的气球是有序排队的,从左向右排,从上向下排)
3.浮动元素默认不会从父元素中移出(父元素也是一堵墙,气球是出不去的)
4.浮动元素向左或向右移动时,不会超过它前边的其他浮动元素(空中的气球是有序排队的,从左向右排)
5.如果浮动元素的上边是一个没有浮动的块元素,则浮动元素无法上移(块元素是一堵墙)
6.浮动元素不会超过它上边的浮动的兄弟元素,最多就是和它一样高(气球有序排队,一排没排满可以排同一排,排满了就排后面一排,新来的气球只能从左向右排,这一排排不下了就会自动换下一行排)