[Solved] Correct way to clear floating elements inside

by


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/

6

solved Correct way to clear floating elements inside