<span>I am<br />float</span>
<p>Paragraph</p>
<ul>
    <li>This is a list</li>
    <li>It is next to a float</li>
    <li>Things are so broken</li>
    <li>Much sad</li>
</ul>
<p>Not looking good...</p>

<hr />

<span>I am<br />float</span>
<p>Paragraph</p>
<ol>
    <li>This is a list</li>
    <li>It is next to a float</li>
    <li>Things are so broken</li>
    <li>Much sad</li>
</ol>
<p>Not looking good...</p>
span {
    float: left;
    background: red;
    color: white;
    margin: 0 1rem 1rem 0;
    padding: 1rem;
}

/* minimal styles to make things prettier */

body {
    /* https://modernfontstacks.com/ */
    --classical-humanist: Optima, Candara, "Noto Sans", source-sans-pro,
        sans-serif;
    font-family: var(--classical-humanist);
    font-size: 1.125rem;
    margin: auto;
    max-width: 30rem;
    padding: 1rem;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.