floats-clear-multicol-balancing-003.html (1340B)
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-balancing-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 height: 100px; 17 } 18 19 .step { 20 height: 10px; 21 border: 15px aqua; 22 border-style: none solid; 23 } 24 .float { 25 float: right; 26 width: 15px; 27 background: aqua; 28 height: 240px; 29 } 30 .L { 31 float: left; 32 } 33 34 .container { 35 width: 100%; 36 background: red; 37 } 38 39 .clear { 40 clear: left; 41 height: 0; 42 background: red; 43 } 44 .bar { 45 border-bottom: 5px orange solid; 46 } 47 </style> 48 49 <p>The orange line should be in the third column 50 (immediately after the end of the aqua lines). 51 52 <div class="multicol"> 53 <div class="step"></div> 54 <div class="container"> 55 <div class="float L"></div> 56 <div class="float R"></div> 57 </div> 58 <div class="clear"><div class="bar"></div></div> 59 </div>