Correct Way To Clear Floating Elements Inside

• some text...
• some text...

Solution 1:

Floats are not contained by default. If the images are taller than the <li>, they will push the content of the following <li> to the right (float left of).

Some alternatives to clearfix can be to force a new block formatting context. The LIs will stretch to their content, so a popular method is:

li {
    overflow: hidden;
}

Compare http://jsfiddle.net/NvHVa/ vs http://jsfiddle.net/NvHVa/1/

Other ways to trigger a block formatting context: https://developer.mozilla.org/en-US/docs/Web/CSS/Block_formatting_context

For an explanation and a better method, check out http://colinaarts.com/articles/float-containment/

Solution 2:

overflow:auto; looks like working here... I think the correct way would be to put the img as the li image.. but w/e ;D

DEMO:http://jsfiddle.net/goodfriend/EsgVH/14/

HTML:

<ul>
    <li><img>some texsome text.. some text.. some text.. some text.. t...</li>
    <li><img>some text.. some text.. some text.. some text.. some text.. somesome text.. some text.. some text.. some text.. some text.. some text.. some text.. some text.. some text.. some text..  text.. some text.. some text.. .</li>
    <li><img>some tesome text.. some text.. xt...</li>
</ul>

CSS:

img{
    float:left;
    width:50px;
    height:50px;
    border: 1px solid blue;
    margin-right:5px;
}

li{
    overflow-y:auto; // or just the overflow:auto;
    margin-bottom:5px;
}