SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Block Formatting Context

    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. #2
    Mouse catcher silver trophy
    Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,838
    Mentioned
    114 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    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.

    Quote Originally Posted by w3c
    Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

  4. #4
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Or is it just that you're not allowed to have inline elements inside of blocks, so they came up with Block Formatting Context..?

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by awesomesause View Post
    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>
    I assume you meant:
    Code:
    <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

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by awesomesause View Post
    Or is it just that you're not allowed to have inline elements inside of blocks, so they came up with Block Formatting Context..?
    I'm not really sure what you are asking there but I'll try and answer.

    It is very bad practice to do this:

    Code:
    <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:

    Code:
    <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. #8
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    7
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    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...


    Code:
    <div>
      <p>hello hello</p>
       <em>Evening all</em>
    </div>
    P and EM CANT be siblings... but EM does have a meaning, semantically.
    Code:
    <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. #10
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post

    I think you meant anonymous INLINE element.
    No, the OP was referring to an anonymous block box that is constructed around the stray inline content.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •