1 layer at (0,0) size 800x600
2 LayoutView at (0,0) size 800x600
3 layer at (0,0) size 800x152
4 LayoutBlockFlow {HTML} at (0,0) size 800x152
5 LayoutBlockFlow {BODY} at (8,16) size 784x120
6 LayoutBlockFlow (floating) {DIV} at (569,0) size 215x60 [bgcolor=#CC6666]
7 LayoutText {#text} at (20,20) size 175x19
8 text run at (20,20) width 175: "DIV NUMBER 1: float:right;"
9 LayoutBlockFlow (floating) {DIV} at (503,60) size 281x60 [bgcolor=#99CC66]
10 LayoutText {#text} at (20,20) size 241x19
11 text run at (20,20) width 241: "DIV NUMBER 2: clear:right; float:right;"
12 LayoutBlockFlow (floating) {DIV} at (0,60) size 207x60 [bgcolor=#6699FF]
13 LayoutText {#text} at (20,20) size 167x19
14 text run at (20,20) width 167: "DIV NUMBER 3: float:left;"
15 LayoutBlockFlow {P} at (0,0) size 784x120
16 LayoutText {#text} at (0,0) size 567x99
17 text run at (0,0) width 564: "The first element is floated to the right. The second element clears the right float and also floats"
18 text run at (0,20) width 567: "right. The third element is floated to the left, but is forced below the bottom of the first element."
19 text run at (0,40) width 560: "Yet, somehow this paragraph comes at the end of the markup, and manages to rise to the top"
20 text run at (207,60) width 282: "of the page. This behavior is present in Firefox,"
21 text run at (207,80) width 112: "Safari and Opera. "
22 LayoutInline {A} at (0,0) size 286x39 [color=#0000EE]
23 LayoutInline {STRONG} at (0,0) size 286x39
24 LayoutText {#text} at (319,80) size 286x39
25 text run at (319,80) width 174: "Click here for a real world"
26 text run at (207,100) width 133: "example of this bug."