I think I let code speak:

```css
.aside {
    float: right;
    width: 200px;
    background: red;
}

.main {
    margin-right: 220px;
}

.main ul li {
    border-bottom: 1px solid black;
}

.main ul li img {
    float: left;
}

/* clearfix */
.clearfix:before,
.clearfix:after {
 content: " ";
 display: table;
}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
```

```html
<div class="aside">
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
    <p>This is a div aside with some very interesting notes and a text to give it some height.</p>
</div>
<div class="main">
    <ul>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 1</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 2</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 3</div></li>
        <li><div class="clearfix"><img src="http://orig06.deviantart.net/7926/f/2013/172/c/7/free_grumpy_cat_icon_by_fiinie-d6a1ose.gif">item 4</div></li>
    </ul>
</div>
```

This is the problem I have: The first list entry clears to the parent-parent div aside and not to the content inside the div itself. (If you can't see a problem just narrow down your browser window.) And I'm really unable to fix this situation. Tried it with relative positioning etc. Tried to fix it with manually clear the floats. But nothing helps.

To me it looks like a very strange behavior I've never seen before. But I'm sure a CSS chief can tell me what's the problem and how to work around it.