Correct way to clear floating elements inside

Question

<ul style="overflow-y: auto;">
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
    <li><img style="float: left;"/>some text...</li>
</ul>

Is it neccessary with some kind of clearfix here? Or does each floating <img/> only affect the content of its corresponding <li>?

.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

possible duplicate of [Which method of 'clearfix' is best?](http://stackoverflow.com/questions/211383/which-method-of-clearfix-is-best) — feeela, Jul 01 '13 at 12:42
@feeela Not at all, tbh. I'm not asking for "the best" clearfix, I want to know how the floating images are affecting the rest of the content in the list element. — Johan, Jul 01 '13 at 12:48

xec · Accepted Answer · 2013-07-01T12:37:47.927

2

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/

edited Jul 01 '13 at 12:37

answered Jul 01 '13 at 12:31

xec

17,349
3
46
54

So... what are you suggesting? – Johan Jul 01 '13 at 12:32
Floating the li as well, or giving them `overflow:auto` … – CBroe Jul 01 '13 at 12:33
@CBroe how about the clearfix class that I posted in my question? – Johan Jul 01 '13 at 12:37
@Johan Check the last link in my answer, it explains why clearfix is often a bad idea. – xec Jul 01 '13 at 12:38
"overflow: hidden (for modern browsers)". I need this to work in IE7. – Johan Jul 01 '13 at 12:40
1

@Johan Read the entire line, it specifically says `overflow: hidden; /* For modern browsers and IE7 */` – xec Jul 01 '13 at 12:42

Ms. Nobody · Answer 2 · 2013-07-01T12:46:04.743

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

Correct way to clear floating elements inside

2 Answers2

HTML:

CSS:

Linked