c5526-fltclr-000.xht (2469B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>CSS Test: clear</title> 5 <meta name="flags" content="ahem image" /> 6 <link rel="help" href="http://www.w3.org/TR/REC-CSS1#clear"/> 7 <link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/> 8 <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> 9 <link rel="match" href="c5526-fltclr-000-ref.xht" /> 10 11 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 12 <style type="text/css"><![CDATA[ 13 div { font: 15px/1 Ahem; color: green; background: red url(support/css1test5526.png) no-repeat; width: 20em; border: solid black; } 14 p { margin: 1em 0; } 15 .left {float: left;} 16 .right {float: right;} 17 .one {clear: left;} 18 .two {clear: right;} 19 .three {clear: both;} 20 .four {clear: none;} 21 ]]></style> 22 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/> 23 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"/> 24 </head> 25 <body> 26 <p>There should be a big green box below.</p> 27 <div> 28 <img src="support/swatch-green.png" height="50" class="left" alt="[Image]" /> 29 <p> 30 xxxxx xxxx xxx xx x xx xxx xxxx 31 xxxxx xxxx xxx xx x xx xxx xxxx 32 xxxxx xxxx xxx xx x xx xxx xxxx 33 </p> 34 <img src="support/swatch-green.png" height="50" class="left" alt="[Image]" /> 35 <p class="one"> 36 xxxxx xxxx xxx xx x xx xxx xxxx 37 xxxxx xxxx xxx xx x xx xxx xxxx 38 </p> 39 <img src="support/swatch-green.png" height="50" class="right" alt="[Image]" /> 40 <p class="two"> 41 xxxxx xxxx xxx xx x xx xxx xxxx 42 xxxxx xxxx xxx xx x xx xxx xxxx 43 </p> 44 <img src="support/swatch-green.png" height="50" class="left" alt="[Image]" /> 45 <img src="support/swatch-green.png" height="50" class="right" alt="[Image]" /> 46 <p class="three"> 47 xxxxx xxxx xxx xx x xx xxx xxxx 48 xxxxx xxxx xxx xx x xx xxx xxxx 49 </p> 50 <img src="support/swatch-green.png" height="50" class="left" alt="[Image]" /> 51 <img src="support/swatch-green.png" height="50" class="right" alt="[Image]" /> 52 <p class="four"> 53 xxxxx xxxx xxx xx x xx xxx xxxx 54 xxxxx xxxx xxx xx x xx xxx xxxx 55 xxxxx xxxx xxx xx x xx xxx xxxx 56 xxxxx xxxx xxx xx x xx xxx xxxx 57 </p> 58 </div> 59 </body> 60 </html>