Question

In the CSS 2.1 specification;

“This property indicates which sides of an element’s box(es) may not be adjacent to an earlier floating box. The ‘clear’ property does not consider floats inside the element itself or in other block formatting contexts.”

As we know, the property float can eatablish a new block formatting context, that means there won’t any element is in the same block formatting context with floating element except floating element’s child. Yes, right?

Answer 1

If I may refer to the other question related to this ( for the images!) :
How does the CSS Block Formatting Context work?

in the first 2 images all the elements , left column, right column, h3, p and the 2 x floated boxes are all in the same Block formatting Context, the root element is responsible for positioning them all, so all floats are counted when clearance is invoked.

in the 3rd image “main content” or middle column is made into a new Block Formatting Context.. so only the left, middle and right columns are now in the “root” Block Formatting Context. Whereas the actual content of the middle column the h3, p and two purple floated boxes are now in a different one, though they’re all in the same new one.

It’s like you drew a boundary around the middle column and isolated it so floats within it can now ignore the floats outside it (if cleared), and also elements inside it can take 100% width without counting the space being used by the side column floats

and yes it different from block and inline elements.. the context is the rectangle in which all the elements appear, the elements in the context are either block or inline as normal, Block Level elements and Block boxes (and inline and anonymous..) are described under the Visual Formatting Model (not context)