| <!DOCTYPE html> |
| <meta charset="utf-8" /> |
| <link rel="help" href="https://drafts.csswg.org/css-logical/#float-clear"> |
| <link rel="match" href="reference/logical-values-float-clear-1-ref.html"> |
| <style> |
| body > div { width: 20em; margin: 1em; padding: 2px; border: 1px solid silver; } |
| div > div { margin: .5em; padding: .5em; background: yellow; } |
| .is { float: inline-start; } |
| .ie { float: inline-end; } |
| .ltr { direction: ltr; } |
| .rtl { direction: rtl; } |
| </style> |
| |
| <body> |
| <div class="ltr"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Phasellus efficitur nisi at sollicitudin eleifend. |
| <div class="is">Inline-start</div> |
| Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. |
| Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, |
| ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. |
| <div class="ie">Inline-end</div> |
| Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. |
| Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. |
| Aliquam erat volutpat. |
| </div> |
| |
| <div class="rtl"> |
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. |
| Phasellus efficitur nisi at sollicitudin eleifend. |
| <div class="is">Inline-start</div> |
| Vestibulum ac condimentum diam. Vivamus viverra iaculis mollis. |
| Nam bibendum, dolor id porttitor egestas, metus sem pretium eros, |
| ut mollis mauris ligula eu risus. Aenean eget vestibulum nunc. |
| <div class="ie">Inline-end</div> |
| Nam vitae eleifend tellus. Vestibulum ut accumsan lacus. |
| Vivamus vitae eros hendrerit, tincidunt augue non, laoreet justo. |
| Aliquam erat volutpat. |
| </div> |