bfc-next-to-float-2.html (1713B)
1 <!DOCTYPE html> 2 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 3 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> 4 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/4028"> 5 <link rel="help" href="https://drafts.csswg.org/css2/#floats"> 6 <meta name="assert" content="The border box of a block-level element that 7 establishes an independent formatting context can't overlap the margin box 8 of any float in the same block formatting context. 9 The stretch size needs to respect that. 10 "> 11 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 12 <style> 13 #reference-overlapped-red { 14 position: absolute; 15 background-color: red; 16 width: 100px; 17 height: 100px; 18 z-index: -1; 19 } 20 .stretch { 21 display: flow-root; 22 height: 25px; 23 background: green; 24 } 25 </style> 26 27 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 28 <div id="reference-overlapped-red"></div> 29 30 <div style="width:200px; margin-left: -100px;"> 31 <div style="float: left; width: 100px; height: 75px;"></div> 32 <div class="stretch" style="width: 0; min-width: stretch"></div> 33 <div class="stretch" style="width: 1000px; max-width: stretch"></div> 34 <div class="stretch" style="width: stretch; padding: 0 10px; border: solid green; border-width: 0 10px; margin-left: 10px"></div> 35 </div> 36 <div style="width:250px; margin-left: -150px;"> 37 <div style="float: left; clear: left; width: 100px; height: 1px;"></div> 38 <div style="float: left; clear: left; width: 150px; height: 1px;"></div> 39 <div style="float: left; clear: left; width: 125px; height: 1px;"></div> 40 <div class="stretch" style="width: stretch"></div> 41 </div>