左侧第一行无端出现跟右边一样的高度，解决方案是有，但是不知道为什么会出现，请哪位朋友帮我解释下原因，谢谢！

<style type="text/css">

.r{     float: right;     width: 230px;     background: #d4d4d4; } .l{     margin-right: 250px;     background-color: #2b81af; }  .item:before {     content: ';     display: block; } .item:after {     content: ';     display: table;     clear: both; }

</style>

<div class="r">

<p>aaaaaa</p> <p>aaaaaa</p> <p>aaaaaa</p> <p>aaaaaa</p> <p>aaaaaa</p> <p>aaaaaa</p>

</div>
<div class="l">

<div class="item">bbbb</div> <div class="item">bbb</div> <div class="item">bbb</div>

</div>