教程：http://m.blog.csdn.net/blog/yhc13429826359/38778337
写的很好。自己实现的时候，由于img float:left，会脱离文档流，导致结构混乱。
学到的知识是：clear:both；
清除当前定义的元素左右浮动
诸如：
clear:left; //清除左浮动
clear:right; //清除右浮动
clear:both; //清除左右两边浮动
自己敲后的代码
@charset 'utf-8';
.con{
width:200px;
height:400px;
background-color:#f8f8f8;
.item{
clear:both;
.image-con{
float:left;
img{
width:50px;
height:50px
}
}
.msg-con{
background-color: olive;
float:left;
margin:0 20px 10px 15px;
padding:10px;
padding-left:0;
border-radius:7px;
img{
width:50px;
height:50px
}
}
}
}
html
<div class='con'>
<div class='item'>
<div class='image-con'>
<img src='chrome.png' />
</div>
<div class='msg-con'>
<span>message</span>
</div>
</div> <div class='item'>
<div class='image-con'>
<img src='chrome.png' />
</div>
<div class='msg-con'>
<span>message</span>
</div>
</div> <div class='item'>
<div class='image-con'>
<img src='chrome.png' />
</div>
<div class='msg-con'>
<span>message</span>
</div>
</div>
</div>
.item 的高度还是0，但是它会正常的排好。