CSS float Property - Playground Example

<!DOCTYPE html><html><head><style type="text/css">.float-demo {
    max-width: 720px;
    border: 1px solid #e0e0e0;
    padding: 16px;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    background: #ffffff;
}

.float-left {
    float: left;
    width: 150px;
    height: auto;
    margin: 0 16px 16px 0;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.float-right {
    float: right;
    width: 140px;
    background: #f7fbff;
    padding: 10px;
    border: 1px solid #dfeef8;
    margin: 0 0 16px 16px;
    box-sizing: border-box;
    border-radius: 4px;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Small responsive tweak */
@media (max-width: 480px) {
    .float-left,
    .float-right {
        float: none;
        width: 100%;
        margin: 0 0 12px 0;
    }
}</style></head><body><div class="float-demo">
    <h2>Float property example</h2>
    <div class="box float-right">
        <strong>Floating box</strong>
        <p>Floats to the right.</p>
    </div>

    <img src="https://placehold.co/150" alt="Placeholder image" class="float-left" />

    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere, nisl at
        fermentum elementum, urna purus tristique lorem, a tincidunt risus arcu non
        mauris. Vivamus luctus, odio at interdum dictum, neque sapien cursus justo,
        vitae volutpat lorem nunc vitae sapien.
    </p>

    <p>
        Curabitur non lectus ac sapien interdum cursus. This paragraph continues to show
        how text wraps around floated elements. Resize the container or window to see the
        float behavior adapt.
    </p>

    <div class="clearfix"></div>
</div></body></html>