Home/ Questions/Q 903265
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T15:50:54+00:00

I have always thought that the correct way to handle CSS floats was to

  • 0

I have always thought that the correct way to handle CSS floats was to use either a clear div, :after pseudo class, or overflow: auto on the parent. As I understand it clear is designed to clear floats and expand the parent element back to normal. That is it’s purpose, yes?

Today I found heard of an alternate method of handling the float (and parent collapse): floating the parent as well to make it expand around the floated child.

How does this align with web standards? Is there even an official float/clear standard?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As @edeverett said, there is no particular standard.

    Real beginners use absolute positioning and enter the nightmare mode as there is so many constraints and things to care about.

    Beginners tend to float everything within the content and then search where the background of the parent is, though with no content in the flow the parent can’t have a visible background anymore …
    I had hard times with IE6 and the last column (too large for the whole design) going under the others (due whether to doubled margin float bug or a width 100% + padding/margin on a child)

    Then you learn many different techniques, each with its strength and constraints and problems.

    Then you learn by experience when to use each of them. Even absolute positioning in seldom cases ; even layout tables in desperate cases. They’re bad but a layout with 25 divs waiting to explode as soon as you add 1px somewhere are worse.
    A rule of thumb is the less you remove content from the flow, the less you have problems. And there always many ways to do the same thing in CSS.

    My personal favorite is the versatile display: inline-block;
    Now that Fx 3.x has replaced Fx 2.0 (3.0 is even disappearing), it’s supported by every browser (display: inline; + zoom: 1; + conditional comment for IE<8).
    Two minor annoyances I can think of:

    • Whitespace needs a trick like a </div><!-- comment --><div> between two consecutive div to avoid it
    • vertical-align: top; is often required and is hard to spot when you begin to use it

    On forms with a label + input per line, it does wonders, compared to floats. Same in headers or footers.

    • 0