More forceful means of making parents care

Another way to force the parent to 'see' and 'house' its floated children is to make it into what is called a Block Formatting Context. What this means, in the end, is that the parent encloses its own children (be they inline or floats) and it keeps out possible intruders from other families.

There are various ways to cause the parent to be a Block Formatting Context. One way is to give the parent an absolute position. But this usually brings in other problems. Too inconvenient and costly! In fact, it's awkward enough to not tempt me to illustrate it here on this page. But here is a live example of absolute positioning causing parental responsibility (on another simpler page).

Another way to trip a Block Formatting Context is to float the parent itself. It then gets a salutary lesson in what it is like to be a float and starts seeing its own floated children at last! It houses them:

Fig 1. With the parent given style="float:left;".

Yet another way to make the parent a Block Formatting Context is to set 'overflow' to anything but the default 'visible'. Perhaps this is the most natural way because it looks like we are dealing with an overflow situation, floats hanging out of boxes. Here is an example:

Fig 2. With the parent given "overflow: hidden;".

overflow: auto; would be fine too. Perhaps it would be no real advantage in most situations and even possibly undesirable. Here is what it might look like:

Fig 3. With the parent given "overflow: auto;".

But not overflow: scroll which triggers a likely unwelcome scroll-bar space:

Fig 4. With the parent given "overflow:scroll;".

I mentioned above that making the parent a Block Formatting Context also keeps out intruders from other families. Think of this as one more way in which parents can be forced to protect all their children. If, for instance a float generated from within a container A would normally intrude into a container B, then making B into a Block Formatting Context should prevent this:

Fig 5. Simply two normal containers with overflowing floats.

Notice how the children in B are pushed aside by the intruder. Below is a way to put a stop to this:

Fig 6. Here the parent B is a Block Formatting Context (using overflow: auto) and serves to keep out the intruder.

All the above are techniques to use for good modern browsers. In IE6, some of these techniques simply do not work. IE6 does not, for instance, recognise the 'overflow: hidden' on the parent. Talking of IE6, the next page is devoted to tips for ensuring its parents house its floats.