floats-wrap-bfc-007.xht (6214B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> 2 <title>CSS Test: Test for flow around floats</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> 4 <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> 5 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> 6 <link rel="match" href="floats-wrap-bfc-007-ref.xht"/> 7 <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> 8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 9 <meta http-equiv="Content-Style-Type" content="text/css" /> 10 <style type="text/css"> 11 12 table { margin: 0; border-spacing: 0; } 13 td, th { padding: 0; vertical-align: top; } 14 15 </style> 16 </head> 17 <body> 18 19 <!-- 6px margin between (from top, from bottom, from both) --> 20 21 <table width="300" style="background: aqua"><tbody><tr><td> 22 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 23 <div style="height: 5px; background: purple; margin-bottom: 6px;"></div> 24 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow;"></div> 25 </td></tr></tbody></table> 26 27 <table width="300" style="background: aqua"><tbody><tr><td> 28 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 29 <div style="height: 5px; background: purple;"></div> 30 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div> 31 </td></tr></tbody></table> 32 33 <table width="300" style="background: aqua"><tbody><tr><td> 34 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 35 <div style="height: 5px; background: purple; margin-bottom: 6px;"></div> 36 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div> 37 </td></tr></tbody></table> 38 39 <!-- 5px margin between (from both) --> 40 41 <table width="300" style="background: aqua"><tbody><tr><td> 42 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 43 <div style="height: 5px; background: purple; margin-bottom: 5px;"></div> 44 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> 45 </td></tr></tbody></table> 46 47 <table width="300" style="background: aqua"><tbody><tr><td> 48 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 49 <div style="height: 5px; background: purple; margin-bottom: 10px;"></div> 50 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -5px;"></div> 51 </td></tr></tbody></table> 52 53 <table width="300" style="background: aqua"><tbody><tr><td> 54 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 55 <div style="height: 5px; background: purple; margin-bottom: -5px;"></div> 56 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 10px;"></div> 57 </td></tr></tbody></table> 58 59 <!-- 4px margin between (from both) --> 60 61 <table width="300" style="background: aqua"><tbody><tr><td> 62 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 63 <div style="height: 5px; background: purple; margin-bottom: 4px;"></div> 64 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 4px;"></div> 65 </td></tr></tbody></table> 66 67 <table width="300" style="background: aqua"><tbody><tr><td> 68 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 69 <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> 70 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> 71 </td></tr></tbody></table> 72 73 <table width="300" style="background: aqua"><tbody><tr><td> 74 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 75 <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> 76 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> 77 </td></tr></tbody></table> 78 79 <!-- negative margin between --> 80 81 <table width="300" style="background: aqua"><tbody><tr><td> 82 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 83 <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> 84 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 0px;"></div> 85 </td></tr></tbody></table> 86 87 <table width="300" style="background: aqua"><tbody><tr><td> 88 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 89 <div style="height: 5px; background: purple; margin-bottom: 0px;"></div> 90 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> 91 </td></tr></tbody></table> 92 93 <table width="300" style="background: aqua"><tbody><tr><td> 94 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 95 <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> 96 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -1px;"></div> 97 </td></tr></tbody></table> 98 99 <table width="300" style="background: aqua"><tbody><tr><td> 100 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 101 <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> 102 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> 103 </td></tr></tbody></table> 104 105 <table width="300" style="background: aqua"><tbody><tr><td> 106 <div style="float: left; height: 10px; width: 150px; background: blue"></div> 107 <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> 108 <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> 109 </td></tr></tbody></table> 110 111 112 113 </body></html>