In the World Wide Web Consortium (W3C), the concept of Block Formatting Context (BFC) is explained as follows:
Within a block formatting context, boxes are arranged one after another in a vertical manner, starting at the top of a containing block. The distance between two sibling boxes vertically is determined by the 'margin' properties. Vertical margins collapse when adjacent block-level boxes are inside a block formatting context.
In a block formatting context, the left outer edge of each box touches the left edge of the containing block (or the right edge for right-to-left formatting). This remains true even in the presence of floated elements (although line boxes within a box may shrink due to the floats), unless the box itself establishes a new block formatting context (in which case it may become narrower due to the floats).
I'm confused about the term boxes
, does this refer to elements with display:block
property?
If it refers to block
elements, what about inline
and float
elements? I couldn't find any specific information about these types of elements, how should they be handled in relation to BFC?
What are the differences in representation of block elements in normal flow compared to within a BFC? I believe they are the same, just lined up vertically next to each other from the top left to bottom.