floats-clear-multicol-002.html (1210B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 2 <title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> 3 <link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> 4 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 5 <link rel="author" title="Mozilla" href="http://www.mozilla.org/"> 6 <link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> 7 <link rel="match" href="floats-clear-multicol-000-ref.html"> 8 9 <style type="text/css"> 10 .multicol { 11 margin: 1em; 12 border: solid silver; 13 width: 300px; 14 column-width: 100px; 15 column-gap: 0; 16 column-fill: auto; 17 height: 100px; 18 } 19 20 .float { 21 float: right; 22 width: 15px; 23 background: aqua; 24 height: 250px; 25 } 26 .L { 27 float: left; 28 } 29 30 .container { 31 width: 100%; 32 background: red; 33 } 34 35 .clear { 36 clear: left; 37 border-bottom: solid orange; 38 background: red; 39 } 40 </style> 41 42 <p>The orange line should be halfway down the third column 43 (immediately after the end of the aqua lines). 44 45 <div class="multicol"> 46 <div class="container"> 47 <div class="float L"></div> 48 <div class="float R"></div> 49 </div> 50 <div class="clear"></div> 51 </div>