Are floated elements containing blocks?

[Raffles]

I have the following:

<div>
<a><img><span>text 1</span></a>
<a><img><span>text 2</span></a>
<a><img><span>text 3</span></a>
</div>

div {
  position:relative;
}
div a span {
  position:absolute;
  display:none;
}
div a:hover span {
  display:block;
}

A row of three images appears. When the links are hovered over, a span appears underneath the row of images, in the div. If the images are of different heights, the span still appears in the same place, because the containing block of the span is the div (position:relative, whereas the anchor is static).

However, if I add this:

div a {
  display:block;
  float:left;
}

Suddenly the spans start appearing absolutely positioned in relation to the anchor and not the div. According to this great article, a containing block is one positioned absolutely, relatively or fixed. It says nothing about floats.

Can someone clarify?

[Raffles]

I don't think so. Actually, the effect is identical if the CSS that you add is just this:

div a {
  float:left;
}

The span starts showing up positioned in relation to the anchor instead of the div, even though, it seems to me, in both cases, the div is the containing block and so the span should be positioned absolutely in relation to the div.

[Raffles]

That is the problem. I thought it wouldn't matter. Why should their positioning relative to the containing block (the div) be affected by whether the parent (the anchor) is floated or not? Surely top:auto and left:auto (since the positioning isn't indicated) should be controlled by the div alone, since that is what the containing block is.

[Raffles]

Yes, I know it works with positioning. That's not my question. My question is, if the spans are absolutely positioned but the position is not specified, why should it be affected by whether the anchor is floated or not, if it isn't the containing block and the div is?

[Dan Schulz]

Probably because the anchor is the containing block for the span. Have you tried declaring the anchor to be a block-level element?

[Raffles]

Yes, see the first post - the anchor was made to have display:block. And the anchor can't be the containing block - it isn't given a position and so is therefore static, which means it isn't a containing block.