Den 19.08.2014 22:47, skrev John:
It was my understanding that overflow:hidden is the new
clear:both/clearfix.
Revise that understanding ... no new method replaces any old methods.
At best new methods are new tools in your toolbox, while "old" and
well-tested methods will continue to work as they have always done.
Some alternatives for containing floats...
'overflow: hidden' contains floated children, but also hides all
children that overflows its border-lines.
- Manipulating you CSS in Chrome/Opera shows that some children do in
fact overflow border-lines of their containers, thus in part become
invisible.
'clear: left/right/both', on actual elements or as 'clearfix', can be
used to contain an element's children, and no children gets hidden.
- More suitable for your case, and works as intended in almost all cases.
'float: left/right' contains floated children, but must then also
themselves be cleared or contained.
- I use this method a lot because it is so simple and versatile, and
combine it with one or more of the other methods when necessary.
'display: table / table-cell' contains floated children, but mess with
positioning of children in some (mainly Gecko) browsers.
- In a few cases this is the best method, but it is not particularly
well suited as a "general containment" method.
... and there are a few more "float containment" methods that work well
in some cases but not in other. Start by learning all implications of
each method, and then select method, or combo of methods, as it suits
each case.
regards
Georg
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
