blob: d2a7251cf53fb0691bf9e87571d23ba63056df8a [file] [log] [blame]
ap9cd074c2006-01-05 20:48:53 +00001<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
thatcherffd46e02005-10-25 00:42:22 +00002<html>
3 <head>
4 <title>CSS 2.1 Test Suite: clear</title>
5 <style type="text/css">
6 div { font: 15px/1 Ahem; color: green; background: red url(support/css1test5526.png) no-repeat; width: 20em; border: solid black; }
7 p { margin: 1em 0; }
8 .left {float: left;}
9 .right {float: right;}
10 .one {clear: left;}
11 .two {clear: right;}
12 .three {clear: both;}
13 .four {clear: none;}
14 </style>
15 <link title="9.5 Floats" href="http://www.w3.org/TR/CSS21/visuren.html#floats" rel="help">
16 <link title="9.5.2 Controlling flow next to floats: the 'clear' property" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" rel="help">
17 </head>
18 <body>
19 <p>There should be a big green box below.</p>
20 <div>
21 <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
22 <p>
23 xxxxx xxxx xxx xx x xx xxx xxxx
24 xxxxx xxxx xxx xx x xx xxx xxxx
25 xxxxx xxxx xxx xx x xx xxx xxxx
26 </p>
27 <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
28 <p class="one">
29 xxxxx xxxx xxx xx x xx xxx xxxx
30 xxxxx xxxx xxx xx x xx xxx xxxx
31 </p>
32 <img alt="[Image]" height="50" src="support/swatch-green.png" class="right">
33 <p class="two">
34 xxxxx xxxx xxx xx x xx xxx xxxx
35 xxxxx xxxx xxx xx x xx xxx xxxx
36 </p>
37 <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
38 <img alt="[Image]" height="50" src="support/swatch-green.png" class="right">
39 <p class="three">
40 xxxxx xxxx xxx xx x xx xxx xxxx
41 xxxxx xxxx xxx xx x xx xxx xxxx
42 </p>
43 <img alt="[Image]" height="50" src="support/swatch-green.png" class="left">
44 <img alt="[Image]" height="50" src="support/swatch-green.png" class="right">
45 <p class="four">
46 xxxxx xxxx xxx xx x xx xxx xxxx
47 xxxxx xxxx xxx xx x xx xxx xxxx
48 xxxxx xxxx xxx xx x xx xxx xxxx
49 xxxxx xxxx xxx xx x xx xxx xxxx
50 </p>
51 </div>
52 </body>
53</html>