Equal Width Floating Element

Question

Equal Width Floating Element

I have three divs and am floating first on the left. The other two are wrapped around it to the right, if only the installed element has a fixed width. But if I set the width for the other 2 divs, they no longer wrap around the first, but simply stack lower, as in normal mode.

I understand that I will need to add the same float class to divs 2 and 3 to make them float inside, but I was curious why this behavior occurs if all three are wide (even if the width is less than the width of the available window browser). Here is the code:

<!DOCTYPE html>
<html>

    <head>
        <style>
            .one {
                background-color: steelblue;
                padding: 10px;
                width: 200px;
            }
            .two {
                background-color: orange;
                padding: 10px;
                width: 200px;
            }
            .three {
                background-color: red;
                padding: 10px;
                width: 200px;
            }
            .float {
                float: left;
            }
        </style>
    </head>

    <body>
        <div class="one float">
            <p>I am paragraph one</p>
        </div>
        <div class="two">
            <p>I am paragraph two</p>
        </div>
        <div class="three">
            <p>I am paragraph three</p>
        </div>
    </body>

</html>