3

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?

Andy E
  • 338,112
  • 86
  • 474
  • 445
eileen Tao
  • 1,023
  • 1
  • 8
  • 8
  • I can't understand your question, but the [MDC docs](https://developer.mozilla.org/en/CSS/block_formatting_context) and elsewhere in the [W3C spec](http://www.w3.org/TR/CSS2/visuren.html#block-formatting) explain what a block formatting context is. – BoltClock Jun 02 '11 at 08:04
  • block formatting context is different from block formatting?[example](http://www.mattryall.net/blog/2008/08/css-layout-fundamentals-block-and-inline-boxes) – eileen Tao Jun 02 '11 at 08:14

1 Answers1

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)

Community
  • 1
  • 1
clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • I almost get it.You said "in the first 2 images all elements are all in the same block formatting context",but as we know, 'float' can eatablish a new block formatting context, so left column, right column should be not in the same block formatting context with middle column. I am right? – eileen Tao Jun 03 '11 at 01:50
  • 1
    no, not quite but I think you've nearly got it ;) - the left and right columns are in the same (root) context as middle - but because they are floated they **establish** or **make** a new context for their descendants to be in, it doesn't actually move them out their original context - so if you then make middle establish a new context too it still stays in the same (root) context as the two side floats, but it makes a new one, sets boundaries, for it's children too. – clairesuzy Jun 03 '11 at 09:42