两个常见的前端问题：如何让分页码居中显示 及 解决浮动元素覆盖的问题

不知道怎么就做起前端的工作了，而且越来越深入。不知道以后会不会走上这条不归路。至少现在要把学到的知识，积累的经验记录下来。

      今天要说两个小问题。一是，分页码居中显示。二是，浮动区块不下沉。

      一、如何让分页码不设宽度的情况下左右居中

      第一个问题，是分页码的问题。如果不设置样式。肯定是靠近左边的。比如这样。

      有同学很聪明，提出了方案。给它设个width,然后，margin：o auto;就OK了。在一定程序上，这个方案是靠谱的，因为页面会以设定的宽度来“居中”显示。但是问题是你怎么知道它的宽度，可能一共有3页，也可能有10页甚至更多。当然，有个方案是退而求其次，显示固定的上一页，下一页和固定3个分页标签就可以固定宽度了。这个方案是可行的，会达到效果。但是今天专门写这篇文章就肯定用个更好的方法了。能让它不论多少页的情况下都能绝对居中显示。

      说出来方法特别简单，就是在分页码的a或li标签外包一个div标签，设置属性display为table.并且设置 margin:0  auto;然后把里面的a，li标签全部设置属性为display:inline-block;就噢了。就是这么神奇。

     

      二、设置浮动后，元素覆盖怎么办。

     

      如上图这样的瀑布流式页面。每条信息里面都会有左右不同的区块，这时候就会用左右浮动，效果特别棒。可是这时候会出现一个副作用，就是设置的块高度不起作用了。下一条信息会覆盖到上一条。原因很简单，因为设置浮动以后，这条信息里的元素都“浮”在了上面。下面的元素就切进去了。

      解决方案同样特别简单，一种方法是在浮动元素后面追加一个div块，设置属性clear:both.清除浮动即可。还有一种更简单的方法，就是给浮动元素的父类元素加个属性overflow:hidden;具体哪种更适合看情况而定吧。