after using float, I know it is needed to continue the flow if we want the enclosing div to include the whole thing (with the obj being floated)... so i know of <br style="clear: both" /> or <div style="clear: both" /> and some even say it is best to <div style="clear: both; height: 1px" /> is there a standard way to do it, especially with all the browsers being different?
The second method, <div style="clear: both" />, is as close to standard as you are going to get. But I would use: <div style="clear: both"></div> Maybe even put a spacer or in there.
I wouldn't do either one. Inserting structural markup for presentation purposes is akin to committng a mortal sin 99% of the time (you know, like killing someone). Instead, look at the elemetn you need to clear, and apply the style to that instead.
The problem is, sometimes there is nothing to clear. For example, a div with blue background, and the div includes a photo floating at the left, and a short description at the right. If it is not cleared, then the div with the blue background doesn't enclose the whole photo... i think just the short description is enclosed, looking like 2 div overlapping each other. (IE will enclose the photo anyway, but firefox and safari won't)
Surprisingly, I tried 4 versions and they all behave differently: to see the code, go to www (dot) 0011 (dot) com/continue_flow_version1.html and replace 1 with 2, 3, 4 afterwards it looks like the one that always continue the flow is <div>
That's not even valid HTML. You're missing entire blocks of code that are necessary (such as HEAD, TITLE, BODY...)
It would get the browsers on the same level playing field, which would make it a lot easier to code the way you want.
that makes it sound like heaven... maybe that's why some people can sit in front of the computer for few hours in a row, not eating, not bathing...
Take any of the hasLayout triggers and combine them with overflow:hidden/auto or use the PIE clear method which adds an invisible period at the end of the container.