CODEWITHSUNDEEP
htmlcsscss-floatcss-position
everywill
everywill

Reputation: 543

What's the containing block of floated elements?

In css2.1 spec, it says:

A floated box is shifted to the left or right until its outer edge touches the containing block edge or the outer edge of another float.

I wonder what's the containing block of floated elements, and I test:

body {
    position: relative;
    margin: 5px;
    padding: 10px;
}

p {
    float: left;
    position: absolute;
    margin: 10px;
}

<body>
    <p>hehe</p>
</body>

According to css2.1 spec, the absolute positioned element's containing block is the nearest positioned block container's padding box.

But in the code above, the floated element is floated to the content box boundary. I'm confused how to find the containing block of the floated element.

Upvotes: 3

Views: 296

Answers (1)

BoltClock
BoltClock

Reputation: 723578

The premise of your question is flawed. An absolutely positioned element cannot float, and a float cannot be absolutely positioned. From section 9.7:

[...] if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none' [...]

So you're not trying to find the containing block of a float here. You're trying to find the containing block of an absposed element.

Having said that, if you really must know, the containing block of a float is the same as for relatively positioned or non-positioned elements as I described in my answer to your previous question, since floats cannot be absposed.

Upvotes: 1

Related Questions