Understanding the CSS Box Model and Block Formatting Context (BFC)
This article explains the CSS box model, the differences between content-box and border-box sizing, introduces the concept of Block Formatting Context (BFC), shows how to trigger BFC with various CSS properties, and demonstrates practical layout solutions with code examples.
Box Model
The CSS box model determines the size and position of each element, consisting of content, padding, border, and margin. The box-sizing property selects between the standard content-box (default) and the IE border-box model.
content-box : width and height include only the content area; padding and border are added outside.
border-box : width and height include content, padding, and border.
<style>
* {
margin: 0;
padding: 0;
}
.box, .box2, .box3{
width: 100px;
height: 100px;
padding: 10px;
border: 1px solid red;
background-color: green;
}
.box2 {
box-sizing: border-box;
}
.box3 {
box-sizing: content-box;
}
</style>Three boxes are created; the first uses the default content-box, the second uses border-box, and the third explicitly sets content-box.
<body>
<div class="box"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>Block Formatting Context (BFC)
BFC is an independent rendering region where child elements do not affect elements outside the context. Elements inside a BFC are laid out according to block formatting rules, and margins between adjacent boxes within the same BFC may collapse.
<div class="box1">
<div class="box2"></div>
<div class="box3">
<div class="box4"></div>
<div class="box5"></div>
</div>
</div>When box1 and box3 are designated as BFC containers, box1 contains only box2 and box3 , while the new BFC created by box3 contains box4 and box5 .
How to Trigger a BFC
Floating elements (any float value except none )
Display values such as inline-block , flex , grid , table-cell , table-caption
Block elements with overflow other than visible (e.g., hidden , auto , scroll )
Absolute positioning ( position:absolute or fixed )
The root element ( html )
BFC Layout Rules (Important)
Inner boxes are placed one after another vertically.
Vertical spacing is determined by margins; adjacent margins of boxes in the same BFC may collapse.
Each box’s left margin touches the left border of its containing block (or right side for right‑to‑left layouts).
A BFC is an isolated container; its children do not affect elements outside, and vice‑versa.
When calculating height, a BFC includes floated children.
A BFC’s area never overlaps with floated boxes.
Applying BFC to Solve Collapsing Margins
By wrapping a box with overflow:hidden , a new BFC is created, preventing margin collapse between adjacent elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.box{ width:50px; height:100px; border:1px solid black; }
.box1{ background:lightcoral; margin-bottom:50px; }
.box2{ background:green; margin-top:30px; }
</style>
</head>
<body>
<div class="box box1">Box1</div>
<div style="overflow:hidden;">
<div class="box box2">Box2</div>
</div>
</body>
</html>Clearing Floats with BFC
When a container only contains floated elements, its height collapses to zero. Adding overflow:hidden (or any other BFC‑triggering property) forces the container to enclose the floated children.
.container { border:2px solid #000; padding:1px; overflow:hidden; }
.float-left { float:left; width:150px; background:lightblue; margin:10px; }
.margin-box { width:200px; height:100px; background:lightgreen; margin:20px 0 10px 100px; }Summary
Understanding the CSS box model and BFC enables precise control over page layout. By choosing the appropriate box-sizing and leveraging BFC, developers can solve common issues such as margin collapse, float containment, and element overlapping, creating robust and maintainable front‑end structures.
Rare Earth Juejin Tech Community
Juejin, a tech community that helps developers grow.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.