There're dozens of ways to clear float in order to make sure the containing block containing all his descendents including floating children.
<div style="clear:both;"></div>My Question is : is there any other method?
Many thanks for helping!
Some methods you didn't cover in your question:
display: inline-block - I wouldn't really count that as "an unusual display value", although it's not usually used to clear floats because of it's side effects (such as shrink-wrapping): http://jsfiddle.net/CLXbc/The clearfix class - this is a common technique - http://jsfiddle.net/CLXbc/1/
/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }
By far the two most common methods are overflow: hidden and clearfix.
Going through your other options, here's why they aren't optimal:
"using markup:<div style="clear:both;"></div>" - this is not semantic. Splattering clearing divs throughout your HTML is a poor choice."is floated" - this works, but you don't usually want the shrink-wrapping."is absolutely positioned" - you don't usually want your element to be absolutely positioned."has a display property value of one of more unusual properties(table-cell,etc.)" - display: table-cell doesn't work in IE7.. and yet again, you don't want the side effects.I use overflow: hidden in most cases. Sometimes I can't use that, for example here. In those cases, I usually fallback to clearfix.
You can set the floating element's parent element to overflow:hidden; or overflow:auto;.
http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html
Here's a great read about Floats. Might even give some more insight to long time web developers as well.
