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