OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <style> | |
3 html, body { margin: 0; padding: 0 } | |
4 .fr { | |
5 float: right; | |
6 background: green; | |
7 width: 100px; | |
8 height: 50px; | |
9 } | |
10 | |
11 #oh { | |
12 width: 100px; | |
13 height: 50px; | |
14 overflow: hidden; | |
15 margin-top: -50px; | |
16 background: green; | |
17 } | |
18 | |
19 .clear { /* was originally from an ::after */ | |
20 display: block; | |
21 clear: both; | |
22 height: 0px; | |
23 } | |
24 </style> | |
25 <div style="position:absolute; width:100px; height:100px; background-color: red; top:0px; z-index: -1;"></div> | |
leviw_travelin_and_unemployed
2015/10/08 08:40:25
Put this in the stylesheet as well? "#red" or some
| |
26 <div id="first" style="width: 100px;"> | |
27 <div id="second"> | |
28 <div id="fr" class="fr"></div> | |
leviw_travelin_and_unemployed
2015/10/08 08:40:25
id="float", no class?
| |
29 <div id="clearone" class="clear">Test</div> | |
leviw_travelin_and_unemployed
2015/10/08 08:40:25
id clearone isn't used. clear could be an id.
| |
30 </div> | |
31 <div id="clear2">Test</div> | |
leviw_travelin_and_unemployed
2015/10/08 08:40:25
no id necessary?
| |
32 </div> | |
33 <div id="oh" class="oh" data-offset-y=50></div> | |
leviw_travelin_and_unemployed
2015/10/08 08:40:25
id = test? no class
| |
34 <script src="../../../resources/check-layout.js"></script> | |
35 <script> | |
36 window.checkLayout("#oh", document.getElementById("test-output")); | |
leviw_travelin_and_unemployed
2015/10/08 08:40:25
#oh could be #test?
| |
37 </script> | |
38 <p>crbug.com/535381 : Clear floats nested in earlier siblings. There should be a green box and no red.</p> | |
OLD | NEW |