flexible-box-float.html (1309B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>flexible box flex item float effect</title> 5 <link rel="author" title="zhouli" href="mailto:liz@oupeng.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-containers" /> 7 <link rel="match" href="reference/flex-box-float-ref.html"> 8 <meta name="assert" content="float has no effect on flex items" /> 9 <style> 10 #myDiv { 11 display: flex; 12 flex-flow: row wrap; 13 align-content: space-between; 14 position: relative; 15 } 16 #myDiv p{ 17 width: 300px; 18 height: 30px; 19 margin: 0; 20 } 21 #first-p{ 22 background-color: green; 23 float: right; 24 } 25 #second-p{ 26 background-color: blue; 27 } 28 #myDiv #fail-flag{ 29 width: 600px; 30 background-color: red; 31 position: absolute; 32 left: 0; 33 top: 0; 34 z-index: -1; 35 } 36 </style> 37 </head> 38 <body> 39 <p>'float' have no effect on a flex item.</p> 40 <p>The test passes if there is a green square, a blue square and no red square.</p> 41 <div id="myDiv"> 42 <p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p> 43 </div> 44 <script> 45 </script> 46 </body> 47 </html>