1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2 <html>
3
4 <head>
5
6 <title>CSS Test: clear and clearance calculation - margin collapsing</title>
7
8 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
9 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control">
10 <meta content="" name="flags">
11 <meta content="With clear: none, the first and last paragraphs' margins collapse and the last paragraph's top border edge should be flush with the top of the floating paragraph." name="assert">
12
13 <style type="text/css">
14 body
15 {
16 margin: 8px;
17 }
18
19 #overlapped-red
20 {
21 background-color: red;
22 height: 100px;
23 left: 8px;
24 position: absolute;
25 right: 8px;
26 top: 178px;
27 z-index: -1;
28 }
29
30 #firstParg
31 {
32 height: 20px;
33 margin-bottom: 150px;
34 margin-top: 0px;
35 }
36
37 #floatingParg
38 {
39 background-color: orange;
40 float: left;
41 height: 100px;
42 margin: 0;
43 width: 200px;
44 }
45
46 #lastParg
47 {
48 background-color: lime;
49 clear: none;
50 height: 100px;
51 margin-top: 75px;
52 }
53 </style>
54
55 </head>
56
57 <body>
58
59 <div id="overlapped-red"></div>
60
61 <p id="firstParg"></p>
62
63 <p id="floatingParg"></p>
64
65 <p id="lastParg"></p>
66
67 <p>Test passes if there is above an orange rectangle and a wide bright green rectangle side by side, touching each other. The top of the orange rectangle should be flush with the top of the bright green rectangle. There should be no red.</p>
68
69 </body>
70 </html>