关闭边栏(ESC)打开边栏(ESC)
这些天在弄有关本站这个信息卡的时候，在底部需要弄三个并排的列来放置浏览量、文章数、留言数。要弄好这三个家伙的位置也是挺折腾人的，要考虑到大屏与小屏的适应都是一行排列的。所以用到浮动，好久没用这个了，遇到了一些问题，此文总结以下，希望能帮忙到使用浮动的朋友们。
一、下图是需求的效果图，也是本站中“有关本站”的效果：
二、下图是浮动应用的时候，父元素没有清除浮动塌陷时出现的错位：
上面可以看出，当缩小到一定宽度的时候，后面的列会跟前面的有个落差。
三、下图显示的是父元素的高度没有给撑开，都塌陷在一条线了：
所以在弄这种排列的时候，如果用浮动来设计的话，记得给父元素来个清除塌陷：
|
1 2 |
.clearfix {zoom:1;} .clearfix:after {content:'.';display:block;visibility:hidden;height:0;clear:both;} |
以下附上三列排列的这种卡片的CSS:
|
1 2 |
.xx-p{float:left;width:33.333333%;height:40px;line-height:40px;} .xx-p:nth-child(2){border-right:1px solid #ddd;border-left:1px solid #ddd;} |
关于这个浮动的问题，今天在弄侧边栏的时候，发现，宽度小了还是会出问题，请教了如水迷老师后得到了答案：
在清除浮动的父元素上加上：overflow:hidden;width:100%，这样之后就不会出现错位了。
可以尝试下用display: inline-block不用float
对哦，一语提醒了我，一时思维给定势了。