css中的浮动和定位

         浮动和定位是css布局里面的重要内容。相信很多人和我一样，在初学的时候对这部分概念感到非常迷惑。我呢，就和大家分享一下经过一段时间学习的我对这部分知识的理解，希望可以对大家的学习起到帮助的作用。

1.浮动

         先来说浮动。首先，我们要知道，我们的块级框是根据其在文档（HTML文档）中的位置来定位的。这被我们称之为文档流，或普通流。如图：块级框从上到下一个接一个的垂直排列。

      当我们给块元素设置了浮动之后，这个元素就脱离了正常的文档流。打个比方，假设我们写代码是在盖楼房，文档流就是第一层，浮动元素的话呢就是第二层。我们从上往下看，先看到的是浮动元素。但是，有一点需要注意的是，浮动元素其实并没有完全脱离文档流。它一开始的定位还是要根据它在文档中的位置。这是什么意思呢？

         div2并没有和我们想像的一样漂浮起来，与div1重叠。而当div2向右浮动的时候，是这样的：

      这说明，当浮动元素之前有文档流中的块级框时，浮动元素不能越过它，而在浮动元素之后的块级框，则会无视浮动元素在文档中的存在，上升占据它的空间，这也就是我们通常理解的脱离文档流的元素存在时的体现，浮动元素不再影响不浮动的元素。按盖楼的说法，则是先盖了第二层，再盖上第一层。

1.1如何清除浮动

      关于浮动元素表现的废话说了这么多，我们接下来应该讲讲怎么清除浮动了。为什么我们要清除浮动呢？假设有一张图片啊，你想让它浮动到右边，并且该图片包含在一个有背景颜色的和边框的元素中，如果我们不清除浮动，那么背景的效果就不能展示出来。因为图片浮动了之后，容器就不能包裹住图片了，它们已经不再同一层了，因为希望根据图片的尺寸来合理的包裹，所以我们通常不会对容器进行宽高设置，所以这个时候的容器就是空的，我们不能看到它关于背景等的设置。要想看到效果，就要将浮动给清除。

     用css来清除浮动主要有三种常用的方式。

      第一种大家可能想到了，因为容器和浮动元素不在同一层所以不能正确包裹，那如果容器也浮动了，那不就可以包裹住了吗？这个确实是其中一种方法。但是，这样的话，后面元素的定位就会收到前面浮动元素的影响了。而对布局中所有元素都使用浮动的话，会造成浮动复杂化。所以我们应该还是要寻求一种能将容器撑开的方法。

      第二种方法就是对浮动元素之后的某个元素应用clear。如果没有的话，就需要增加一个空元素，例如<br>或者是一个空的div。当我们对元素应用clear时，css就会自动的在那个元素的顶部增加边距（margin-top）,来使空出的空间能够包裹住浮动元素。这可能会增加一些不必要的标签。

     第三种是对浮动的父元素应用overflow的hidden和auto属。overflow应用这两个属性值时，它会自动的清除包含的所有浮动。

     清除浮动的方法大致是这些。但是实际应用起来要考虑的比较多，也远远比我们说到的情况复杂。

2.定位

        定位在css中有三种：relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。

2.1相对定位

        当我们对一个元素应用相对定位时，这个元素还是会出现在原来在文档流中的位置，我们可以对它应用：top、bottom、left、right等属性对其进行移动，并且不会影响到文档流中其他元素的位置，但是也许会对其他块级框有一定程度的遮挡。相当于是一个元素就占据的一层与二层，并且二层位置可以变动。因为它还是基于文档中的初始位置定位，所以相对定位并没有脱离文档流。

2.2绝对定位

        绝对定位与相对定位相反，位置与文档流无关，因此并不占据文档流元素的空间，对于文档流元素来说，就相当于绝对定位元素不存在似的。绝对定位的元素由距它最近的已定位祖先元素所确定。如果没有已定位的祖先元素，就根据初始包含块来定位。可能是HTML元素或者是画布。

       因为绝对定位的元素与文档流无关，它们能够覆盖页面中的其他元素。我们也可以使用z-index来控制其堆叠次序。z-index值越大，元素的楼层就越高。

2.3 fixed(固定)

      fixed其实就是绝对定位的一种，只是其定位元素是视窗而已。

        

      基本上定位和浮动就是这么些内容了。实际上布局的时候可能会非常麻烦，因为如果没有深入理解定位、浮动和清除浮动的原理的话，我们就会非常疑惑说：为什么清除了浮动之后内边距增加了，为什么绝对定位之后块级框会在这。当然，有一个能有效避免这些疑惑的方法就是用通用选择器（*）将所有元素的margin和padding都设置为零，但是可能还是会碰上一些问题。这是学习的过程中不可避免的。所以还是好好学习多多实践，才能够胜任前端这份日新月异的工作。