page-layoutcss

What is the best way to clear floated elements in CSS?


What is currently considered the best way to clear CSS floated elements that will:


Solution

  • This isn't a graphic design question. It's a CSS one, so belongs on StackOverflow.

    That said, the answer for keeping the HTML clean is simply to give the parent an overflow. So if your markup is:

    <div class="wrapper">
        <div style="float: left;"></div>
        <div style="float: left;"></div>
    </div>
    

    you can give wrapper an overflow:

    .wrapper {overflow: auto}
    

    And now .wrapper will contain both the floats.

    That's usually all that is needed.

    Sometimes, in older IEs, the container also needs a width.