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

<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，但是它会正常的排好。