Overview

1) What is BFC?

BFC stands for Block Forrmatting Context. It is an independent rendering area where only block-level boxes participate, and it defines how these boxes are laid out inside. This region is completely isolated from the outside context.

A BFC is an independent layout environment where the layout of elements is not affected by external elements. Within a BFC, block boxes and line boxes (composed of all inline elements in a line) are arranged vertically along the border of their parent element.

2) What is a Box?

A Box is the fundamental object and unit of CSS layout. A web page consists of numerous boxes. The type of an element and its display property determine the type of Box. Different types of Boxes participate in different Formatting Contexts (containers that determine how a document is rendered).

Display Values	Generates	Participates in
block, list-item, tible	block-level box	BFC
inline, inline-block, inline-table	inline-level box	IFC
run-in	(CSS3 specific)

3) What is a Formatting Context?

A Formatting Context is a concept defined in the W3C CSS2.1 specification. It is a rendering area on a page with a set of rules that determine:

• How its child elements are positioned.
• How they interact with other elements.

The most common Formatting Contexts are BFC and IFC (Inline Formatting Context).

BFC Layout Rules

• Internal boxes are placed vertically, one after another.
• The vertical distance between boxes is determined by their margins.
• Adjacent boxes within the same BFC will have their margins collapsed (merged).
• The left margin edge of each box (both block and line boxes) touches the left edge of the containing block's content area (or the right edge in right-to-left layouts), even in the presence of floats.

  Note: Some references state contact with the border box, but the CSS2.1 specification mentions the containing block's margin edge. Practical testing often shows contact with the content box.

• The area of a BFC does not overlap with float boxes. (See Experimant 1)
• When calculating the height of a BFC, floating child elements are included. (This is the principle behind clearing floats). (See Experiment 2)
• A BFC is an isolated container on the page. Child elements inside a BFC do not affect outside elements, and vice-versa. (This primarily relates to margin collapsing, though external floats can influence internal layout as per rule 4).

How to Create a BFC

• Elements with position: absolute or position: fixed.
• Block containers that are not block boxes: elements with display: inline-block, table-cell, table-caption.

  Note: CSS3 adds display: flex and display: inline-flex.

• Elements with an overflow value other than visible (i.e., hidden, auto, scroll).

Practical Uses of BFC

• Preventing Margin Collapse: Since adjacent boxes within the same BFC have their margins collapsed, placing them in separate BFCs prevents this.
• Creating Adaptive Multi-Column Layouts: According to the rules, a BFC's area does not overlap with adjacent floats. By making an element a BFC (e.g., via overflow: hidden), it can sit beside a floated element, creating a simple two-column layout.
• Clearing Floats (Containing Floats): A parent element containing floated children often collapses in height. Making the parent a BFC forces it to include the floats in its height calculation, effectively "clearing" them.

Because elements inside and outside a BFC are mutually isolated, a BFC adjusts its layout to avoid interference. When an external float exists, the BFC narrows itself to avoid overlap. When internal floats exist, the BFC expands its height to contain them, preventing layout disruption outside.

Appendix: Experimental Verification

Experiment 1: BFC Area Does Not Overlap Float Box

Base Code:

<style>
  .float-box {
    width: 50px;
    height: 50px;
    float: left;
    background: red;
  }
  .test-bfc {
    width: 200px;
    height: 100px;
    /* BFC-creating property will be added here */
    background: blue;
  }
</style>

<div class="float-box"></div>
<div class="test-bfc"></div>

Results: Overlap occurs with some methods (left image), not with others (right image).

Method to Create BFC on .test-bfc	Overlaps with Float?
float (not tested - creates float)	-
position: absolute	Yes
position: fixed	Yes
display: inline-block	No
display: table-cell	No
display: table-caption	No
display: flex	No
display: inline-flex	No
overflow: hidden	No
overflow: auto	No
overflow: scroll	No

Conclusion: The rule "BFC area does not overlap with float boxes" holds for all BFC-creating methods except those using absolute or fixed positioning.

Experiment 2: Floats Participate in BFC Height Calculation

Base Code:

<style>
  .parent-container {
    border: 5px solid red;
    /* BFC-creating property will be added here */
  }
  .floated-child {
    width: 200px;
    height: 100px;
    float: left;
    background: blue;
  }
</style>

<div class="parent-container">
  <div class="floated-child"></div>
</div>

Results:

Method to Create BFC on .parent-container	Floats Included in Height?
float	Yes
position: absolute	Yes
position: fixed	Yes
display: inline-block	Yes
display: table-cell	Yes
display: table-caption	Yes
display: flex	Yes
display: inline-flex	Yes
overflow: hidden	Yes
overflow: auto	Yes
overflow: scroll	Yes

Important Note: The rule specifies that floats are included in the height calculation of the BFC. It does not mandate their inclusion in the width calculation. This leads to different behaviors:

• BFCs created via overflow properties, display: flex, or display: inline-flex do not "shrink-wrap" their width around the float.

• BFCs created by other methods (like display: inline-block, table-cell) do "shrink-wrap" their width to accommodate the float.