html qq消息提示效果,html5 实现qq聊天的气泡效果

教程：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

message

message

message

.item 的高度还是0，但是它会正常的排好。

原文：http://www.cnblogs.com/wang-jing/p/4930248.html