css 浮动问题？

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

<style type="text/css">

.r{ float: right; width: 230px; background: #d4d4d4; } .l{ margin-right: 250px; background-color: #2b81af; }.item:before { content: '; display: b优艾设计网_设计客lock; } .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>

---

ragnarok1000 优艾设计网_设计模板 2022-06-16 18:33

item:after {

---