display-flow-root-002.html (951B)
1 <!DOCTYPE HTML> 2 <meta charset="utf-8"> 3 <title>CSS Display Test: div with display: flow-root and zero width does not intersect outer floats</title> 4 <link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-display-3/#valdef-display-flow-root"> 6 <link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats"> 7 <link rel="match" href="display-flow-root-002-ref.html"> 8 <style> 9 .float { 10 background-color: blue; 11 width: 250px; 12 height: 100px; 13 } 14 .left { float: left; } 15 .right { float: right; } 16 17 #outer { width: 400px; } 18 19 #zerowidth { 20 display: flow-root; 21 width: 0; 22 outline: 1px solid black; 23 height: 200px; 24 } 25 </style> 26 <div id="outer"> 27 <!-- Two floats are positioned and sized such that there is less than zero empty space "between" them. --> 28 <div class="float right"></div> 29 <div class="float left"></div> 30 <div id="zerowidth"></div> 31 </div>