Block Formatting Context

HTML & CSS
1

Hi…

I am a beginner in Css, and i was just wondering what Block Formatting Context is… and how it can be used with floats.

Thanks ,
In Advance

2

See Sitepoint Reference for the lowdown on block formatting context. Essentially, it’s the default style for divs, paragraphs, headings and any other ‘large’ element that takes the full available width.

The other main formatting contexts are inline, float and table.

3

You can also read the full details from the actual specs here.

If you want to know about block formatting contexts with regards to containing floats the certain element properties automatically create a block formatting context and in these cases will automatically contain their child floats.

The usual property is to use overflow:hidden which creates a block formatting context and thus encompasses the child float within its boundaries. (It would need to do this to know how to control the overflow.)

Other properties also create block formatting contexts but their usefulness depends on the situation.

4

So if i had a block-level element with and inline element and a block-level element inside of it. The inline element will become block?

such as…

<div />
<p />This is some text</p>
This is some Text
</div>

5

I assume you meant:


<div>
<p>This is some text</p>
This is some Text
</div>

The “This is some Text” doesn’t become a block element but the browsers will construct an anonymous block element around it to help it code with the badly placed code. The text will be an inline child to the anonymous block element. The link above explains it better :slight_smile:

6

Or is it just that you’re not allowed to have inline elements inside of blocks, so they came up with Block Formatting Context…?

7

I’m not really sure what you are asking there but I’ll try and answer.

It is very bad practice to do this:


<div>
<p>hello hello</p>
<span>Evening all</span>
</div>

The span is the wrong element to use and shouldn’t run into block level elements on the same level.

You should have said:


<p>hello hello</p>
<p><span>Evening all</span></p>
</div>

But of course it is likely the span is redundant in the above structure so why bother using it in the first place - it should be 2 p tags from the start.

However it is not invalid to have the span follow the p but just semantically incorrect and the browser then constructs the anonymous block box around it as mentioned before.

Don’t confuse the way an element looks with how you want it to be placed. Html provides the structure and then with css you create how the page looks. Keep to the rules of html as css doesn’t really care what an element looks like or how it behaves by default as you can style it to suit the occasion. The presentation is separate from the structure although you do have to structure things in certain ways at times because of the limitations of what can be done feasibly.

8

Ok i read both Stevie D’s link and yours…

What i got from it is that when you have a block formatting context, you can either have block or inline contents not both, but if you do have an inline-level element placed within the block container. It will construct a anonymous block box, which is a block element to hold the inline element. However, the inline element does not become block?

9

Simplified explanation:

BLOCK FORMATED ELEMENTS:

  1. Cause a “line return” ( visually speaking at least), for example P, DIV and BLOCK QUOTE, as opposed to A, SPAN , EM, or STRONG… wich are inline elements)
  2. they can be assigned HEIGHT ( or more importantly , inline elements cannot be asigned height
  3. BLOCK LEVEL can contain INLINE ( or other block level elements), but INLINE CAN ONLY CONTAIN INLINE.
  4. for STYLING PURPOSES… you can make any element ( including inline) behave like a block by: floating it, giving it position:absolute; or display:block;

It will construct a anonymous block box, which is a block element to hold the inline element. However, the inline element does not become block?

I think you meant anonymous INLINE element.

As far as Paul’s last post.

It is bad practice to have INLINE + BLOCK as siblings. Sometimes you will see it done ( look ate the suckerfish dropdown technique for example). So what Paul was saying was that IN THAT PARTICULAR SITUATION it becomes necessary to wrap the inline element in a block element… at which point the inline tag COULD become redundant…


<div>
  <p>hello hello</p>
   <em>Evening all</em>
</div>

P and EM CANT be siblings… but EM does have a meaning, semantically.


<div>
  <p>hello hello</p>
   <p><em>Evening all</em></p>
</div>

is what you would then need to do IN YOUR MARK UP.

It’s important to understand that BLOCK elements (or INLINE elements) can be DISPLAYED as inline ( or block) but they do not BECOME BLOCK or INLINE. So in the HTML you must follow the proper structure. use CSS afterwards to style to suit your needs.

I hope this clarifies things a lil.

10

No, the OP was referring to an anonymous block box that is constructed around the stray inline content.