overflow:auto adding scrollbars in Chrome, IE
I used to add a <div style='clear:both'></div> to clear floats from previous segments, but someone suggested I should use overflow:auto on the <div> with floats instead as it's simpler and more clean.
Problem is, I got reports that there were some strange 'shades' in my website. After investigating, it turns out it happens in Chrome, not in Firefox, and those 'shades' are actually very small scrollbars.
I tried to reduce the parts to a minimum in this jsfiddle http://jsfiddle.net/57HM3/4/ . note they are far to the right (by where it says 'Result'). It seems to have to do with the line-height, if I set it to 1.2 instead of 1.1 it disappears. Is this some sort of known issue (that I don't know about)?
I know there are other ways to clear them but they involve IE specific codes and what not. I'd like to keep it as it is, just making the div with the floats as overflow:auto (and if this doesn't work, I'd rather go back to my adding the extra <div>
add overflow:hidden instead of. This will clear your both and will not add any scroll
Don't monkey with overflow. I'd recommend a "clearfix" solution. Here's what I use, I put it at the top of all my style-sheets from the beginning of each project:
/* CLEAR-FIX */
.clearfix:after {
visibility: hidden; display: block; font-size: 0;
content: " "; clear: both; height: 0;
}
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
...got that off a blog so long ago I can't remember where.
Any container that needs to grow with floats just needs the "clearfix" class added:
<div class="test" class="clearfix">
<div style="float:left">Hello</div>
<div style="float:left">World</div>
</div>
BTW, if you're wondering why CSS is such that floats aren't normally counted as part of a parent's height, see: Why do non-floating parents of floating elements collapse?
如果要为容器div保留overflow:auto规则，则可以尝试从.test类中删除line-height规则。
上一篇: 如何获得固定的浮动DIV