flexbox_item-clear.html (569B)
1 <!DOCTYPE html> 2 <title>flexbox | cleared item</title> 3 <link rel="author" href="http://opera.com" title="Opera Software"> 4 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers"> 5 <link rel="match" href="flexbox_item-clear-ref.html"> 6 <style> 7 #float { 8 background: #3366cc; 9 padding: 1em; 10 float: left; 11 12 } 13 #flex { 14 background: #ffcc00; 15 display: flex; 16 } 17 div div { 18 margin: 2em; 19 height: 4em; 20 clear: both; 21 } 22 </style> 23 24 <div id="float">filler</div> 25 26 <div id="flex"> 27 <div>Yellow box should be to the right of the blue box, and 28 never below</div> 29 </div>