flex-box-float-ref.html (997B)
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 <style> 7 #myDiv{ 8 position: relative; 9 } 10 #myDiv p{ 11 width: 300px; 12 height: 30px; 13 display: inline-block; 14 margin: 0; 15 } 16 #first-p{ 17 background-color: green; 18 } 19 #second-p{ 20 background-color: blue; 21 } 22 #myDiv #fail-flag{ 23 width: 600px; 24 background-color: red; 25 position: absolute; 26 left: 0; 27 top: 0; 28 z-index: -1; 29 } 30 </style> 31 </head> 32 <body> 33 <p>'float' have no effect on a flex item.</p> 34 <p>The test passes if there is a green square, a blue square and no red square.</p> 35 <div id="myDiv"> 36 <p id="first-p"> </p><p id="second-p"> </p><p id="fail-flag"> </p> 37 </div> 38 <script> 39 </script> 40 </body> 41 </html>