css实战手册网页布局(前端编程知识分享)
css实战手册网页布局(前端编程知识分享)和刚刚ABC排队的例子一样,A已经离开了原队伍,并在旁边开辟了新的队伍,现在把BC也“浮动”出去,那么B和C将会跟在A的后面重新排队。第一个添加浮动样式1.2我们在第一个色块(红色)上添加左浮动 "float:left;" 我们将会看到黄色色块消失,绿色色块减半。不要惊慌,这只是红色将它们给遮盖了。如图(第一个添加浮动样式1.2)所示。在网页布局中,各种元素大都是服从文档流的,它们按照次序在网页中摆放,现在红色色块被添加了浮动样式,那么它将从文档流中“飘出去”,而它原本所占据的高度塌陷,排在它后面的色块将会占据它的位置。就如同排队一样,本来是ABC一支队伍,现在A突然离开了队伍,站在了队伍的旁边,那么B和C将会补齐A的空位。
在进行网页布局时往往需要为各部分进行定位,在CSS中有一种非常方便的方法,那就是“浮动float”
我们举一个小例子:有三个div块,它们长宽颜色不一,依次是红、黄、绿。如图(初始状态1.1)。
首先我们应该知道一个知识点:div是一种块状元素,一个div独占一行。所以三个div合在一起会成三行的布局,从上往下依次是红色、黄色、绿色。
初始状态1.1
现在要让它们“飘起来”。我们在第一个色块(红色)上添加左浮动 "float:left;" 我们将会看到黄色色块消失,绿色色块减半。不要惊慌,这只是红色将它们给遮盖了。如图(第一个添加浮动样式1.2)所示。
在网页布局中,各种元素大都是服从文档流的,它们按照次序在网页中摆放,现在红色色块被添加了浮动样式,那么它将从文档流中“飘出去”,而它原本所占据的高度塌陷,排在它后面的色块将会占据它的位置。
就如同排队一样,本来是ABC一支队伍,现在A突然离开了队伍,站在了队伍的旁边,那么B和C将会补齐A的空位。
第一个添加浮动样式1.2
若把黄色、绿色也添加上浮动效果,会是如何排列?和刚刚ABC排队的例子一样,A已经离开了原队伍,并在旁边开辟了新的队伍,现在把BC也“浮动”出去,那么B和C将会跟在A的后面重新排队。
所以,如果同时在红黄绿三个色块上加左浮动,它们将会重新排列成队,只不过这次是成横排排列。如图(三块全浮动1.3)所示。
三块全浮动1.3
这样我们就达成了浮动的目的。因为是左浮动,所以从左到右依次排列,如果设置右浮动,那么红色将靠最右,往左依次是黄、绿。
还没完,我们继续更换浮动的色块。还以最初状态为起点,这一次我们只在黄色和绿色上面添加浮动效果,红色无浮动。
将会出现黄色和绿色并排,红色在最上的情况,如图(只浮动黄绿1.4)。
只浮动黄绿1.4
那么你可能有疑问了,不是说好的浮动就是脱离文本流,那么黄色为什么没有浮动到最上方?而依然受到红色位置的制约。
这里就产生了一个规定:黄色是左浮动状态,如果它的前方(红色)也是左浮动状态,那么黄色将会左飘到红色的右侧。但如果红色不是浮动状态,那么黄色将被死死顶着,无法向上飘动。
下面的绿色色块就验证了这条规定的前半部分。
不知道你是否看懂了?我们现在换个思路,倒着来一遍。还是刚才的三个色块,给你一个结构,你能不能想明白谁上面加了浮动?如图(猜猜谁浮动了1.5)。
猜猜谁浮动了1.5
给我们看到的结果是:黄色色块消失了,绿色被“歪三倒四”的接上。
本来黄色就比红色小,那么很显然,黄色色块一定是被红色遮盖,红色色块一定是添加了浮动,原来的位置塌陷,导致黄色色块被安排上去。
那绿色色块为什么出现在这里?我们先找出黄色的位置,如图(找一找结构1.6)所示。
找一找结构1.6
我们找到黄色的位置,发现绿色的头顶就是黄色的底部,再结合上面的推论,红色左浮动,黄色无浮动。绿色又跟在红色的右边,很显然绿色和红色都是浮动状态。
不过绿色无法飘到最上方,因为我们知道div是块状元素,独占一行,再结合刚刚那条规定,所以绿色只能委屈在黄色的下方。
欢迎关注我的头条号,带你一同学习前端,手把手教你写一个属于自己的个人网站