问题：
在chrome中看到父div高度为0，但里面明明有内容。
原因：
简单的讲原因就是子元素如果设了float属性，这些子元素就脱离了父div容器的控制，所以父容器认为里面没内容，高度自然变成了0.
解决办法：
1、在子div最后添加了个专门用户清除浮动的div，如
<div style="clear:both"></div>
2、在父div里添加样式：
overflow:hidden;
3、不要用浮动，子元素使用display:inline-table或者display:inline-block
DEMO:
<style>
.main{padding:10px;font-size:24px;width:480px;}
.header{margin-bottom: 10px;overflow: hidden;}
.header .left{float:left;width:50%;}
.header .right{float:left;width:50%;}
.list{clear:both;overflow: hidden;}
.list .col1{float:left;width:10px;background-color: #0000FF;}
.list .col2{float:left;width:24%;background-color: #26C1FE;}
.list .col3{float:left;width:24%;background-color: #E58484;}
.list .col4{float:left;background-color: #0000FF;}
</style>
<div class="main">
<div class="header">
<div class="left">2015-10-22</div>
<div class="right">+12.00</div>
</div>
<div class="list">
<div class="col1"> </div>
<div class="col2">
<div>avatar</div>
<div>nickname</div>
</div>
<div class="col3">
<div>status:</div>
<div>status:</div>
<div>status:</div>
<div>status:</div>
</div>
<div class="col4"> </div>
</div>
</div>
修改一行最后一个元素的样式
$('#ul li:nth-child(3n)').css('color', 'red');
