浮动和定位是css布局里面的重要内容。相信很多人和我一样,在初学的时候对这部分概念感到非常迷惑。我呢,就和大家分享一下经过一段时间学习的我对这部分知识的理解,希望可以对大家的学习起到帮助的作用。
1.浮动
先来说浮动。首先,我们要知道,我们的块级框是根据其在文档(HTML文档)中的位置来定位的。这被我们称之为文档流,或普通流。如图:块级框从上到下一个接一个的垂直排列。
当我们给块元素设置了浮动之后,这个元素就脱离了正常的文档流。打个比方,假设我们写代码是在盖楼房,文档流就是第一层,浮动元素的话呢就是第二层。我们从上往下看,先看到的是浮动元素。但是,有一点需要注意的是,浮动元素其实并没有完全脱离文档流。它一开始的定位还是要根据它在文档中的位置。这是什么意思呢?
div2并没有和我们想像的一样漂浮起来,与div1重叠。而当div2向右浮动的时候,是这样的:
这说明,当浮动元素之前有文档流中的块级框时,浮动元素不能越过它,而在浮动元素之后的块级框,则会无视浮动元素在文档中的存在,上升占据它的空间,这也就是我们通常理解的脱离文档流的元素存在时的体现,浮动元素不再影响不浮动的元素。按盖楼的说法,则是先盖了第二层,再盖上第一层。
1.1如何清除浮动
关于浮动元素表现的废话说了这么多,我们接下来应该讲讲怎么清除浮动了。为什么我们要清除浮动呢?假设有一张图片啊,你想让它浮动到右边,并且该图片包含在一个有背景颜色的和边框的元素中,如果我们不清除浮动,那么背景的效果就不能展示出来。因为图片浮动了之后,容器就不能包裹住图片了,它们已经不再同一层了,因为希望根据图片的尺寸来合理的包裹,所以我们通常不会对容器进行宽高设置,所以这个时候的容器就是空的,我们不能看到它关于背景等的设置。要想看到效果,就要将浮动给清除。
用css来清除浮动主要有三种常用的方式。
第一种大家可能想到了,因为容器和浮动元素不在同一层所以不能正确包裹,那如果容器也浮动了,那不就可以包裹住了吗?这个确实是其中一种方法。但是,这样的话,后面元素的定位就会收到前面浮动元素的影响了。而对布局中所有元素都使用浮动的话,会造成浮动复杂化。所以我们应该还是要寻求一种能将容器撑开的方法。
第二种方法就是对浮动元素之后的某个元素应用clear。如果没有的话,就需要增加一个空元素,例如<br>或者是一个空的div。当我们对元素应用clear时,css就会自动的在那个元素的顶部增加边距(margin-top),来使空出的空间能够包裹住浮动元素。这可能会增加一些不必要的标签。
第三种是对浮动的父元素应用overflow的hidden和auto属。overflow应用这两个属性值时,它会自动的清除包含的所有浮动。
清除浮动的方法大致是这些。但是实际应用起来要考虑的比较多,也远远比我们说到的情况复杂。
2.定位
2.1相对定位
2.2绝对定位
2.3 fixed(固定)
基本上定位和浮动就是这么些内容了。实际上布局的时候可能会非常麻烦,因为如果没有深入理解定位、浮动和清除浮动的原理的话,我们就会非常疑惑说:为什么清除了浮动之后内边距增加了,为什么绝对定位之后块级框会在这。当然,有一个能有效避免这些疑惑的方法就是用通用选择器(*)将所有元素的margin和padding都设置为零,但是可能还是会碰上一些问题。这是学习的过程中不可避免的。所以还是好好学习多多实践,才能够胜任前端这份日新月异的工作。