css 浮动问题

Question

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

<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>

Answer 1

item:after {

content: '';
/* display: table; */
/* clear: both; */｝


把/* display: table; */
/* clear: both; */ 这2个去掉