position_05_floating_a_box_clear.rml 988 B

12345678910111213141516171819202122232425262728293031
  1. <rml>
  2. <head>
  3. <title>CSS Position: Floating a box - Clear</title>
  4. <link type="text/rcss" href="../style.rcss"/>
  5. <link rel="source" href="https://drafts.csswg.org/css-position-3/#comparison" />
  6. <link rel="help" href="https://drafts.csswg.org/css-position-3/#comparison" />
  7. <meta name="description" content='Now the "sibling" text moves down to below the "inner" text’s box, leaving blank space behind. The text following the "sibling" text flows after it as normal.' />
  8. <style>
  9. body {
  10. font-size: 20dp;
  11. display: block;
  12. background: #ddd;
  13. color: #444;
  14. line-height: 200%;
  15. }
  16. #inner { float: right; width: 130dp; color: blue }
  17. #sibling { clear: right; color: red }
  18. </style>
  19. </head>
  20. <body>
  21. <p>
  22. Beginning of p contents.
  23. <span id="outer"> Start of outer contents.
  24. <span id="inner"> Inner contents.</span>
  25. <span id="sibling"> Sibling contents.</span>
  26. End of outer contents.</span>
  27. End of p contents.
  28. </p>
  29. <handle size_target="#document"/>
  30. </body>
  31. </rml>