floats-bfc-003.html (1402B)
1 <!DOCTYPE html> 2 <title>CSS Test: Floats with overflow:hidden next to them</title> 3 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 4 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"> 5 <link rel="help" href="https://github.com/servo/servo/issues/38365"> 6 <link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> 7 <meta name="assert" content=" 8 The border box of #bfc must not overlap the margin box of #float1 nor #float2. 9 First we try laying it out next to #float1, so it becomes 200px wide, and then 10 its inner floats fit next to each other, so it becomes 50px tall. 11 However, that would overlap #float2. 12 Therefore, we try again, now with a width of 100px. Then its inner floats no 13 longer fit next to each other, so it becames 100px tall. 14 "> 15 16 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 17 <div style="overflow: hidden"> 18 <div style="width: 300px; height: 100px; margin-left: -200px; background: red"> 19 <div id="float1" style="float: left; clear: left; width: 100px; height: 25px"></div> 20 <div id="float2" style="float: left; clear: left; width: 200px; height: 25px"></div> 21 <div id="bfc" style="overflow: hidden; background: green"> 22 <div style="float: left; width: 100px; height: 50px"></div> 23 <div style="float: left; width: 100px; height: 50px"></div> 24 </div> 25 </div> 26 </div>