Block Formatting Contexts in CSS

  • The value of float is not none
  • The value of position is neither static nor relative
  • The value of display is table-cell, table-caption, inline-block, flex, or inline-flex
  • The value of overflow is not visible.

Creating a Block Formatting Context

<div class="container">
Some Content here
</div>
  • display: table may create problems in responsiveness
  • overflow: scroll may show unwanted scrollbars
  • float: left will push the element to the left, with other elements wrapping around it
  • overflow: hidden will clip elements that overflow
.container {
overflow: hidden;
}

Alignment of Boxes in a Block Formatting Context

Block Formatting Context

A Block Formatting Context Causes Collapsing Margins

<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
</div>
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
background-color: lightgreen;
margin: 10px 0;
}

Using a Block Formatting Context to Prevent Margin Collapse

<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<p>Sibling 3</p>
</div>
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}

p {
background-color: lightgreen;
margin: 10px 0;
}
<div class="container">
<p>Sibling 1</p>
<p>Sibling 2</p>
<div class="newBFC">
<p>Sibling 3</p>
</div>
</div>
.container {
background-color: red;
overflow: hidden; /* creates a block formatting context */
}
p {
margin: 10px 0;
background-color: lightgreen;
}
.newBFC {
overflow: hidden; /* creates new block formatting context */
}

Using a Block Formatting Context to Contain Floats

<div class="container">
<div>Sibling</div>
<div>Sibling</div>
</div>
.container {
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}
.container {
overflow: hidden; /* creates block formatting context */
background-color: green;
}
.container div {
float: left;
background-color: lightgreen;
margin: 10px;
}

Using Block Formatting Contexts to Prevent Text Wrapping

<div class="container">
<div class="floated">
Floated div
</div>
<p>
Quae hic ut ab perferendis sit quod architecto,
dolor debitis quam rem provident aspernatur tempora
expedita.
</p>
</div>

Using Block Formatting Contexts in Multi-column Layouts

<div class="container">
<div class="column">column 1</div>
<div class="column">column 2</div>
<div class="column">column 3</div>
</div>
.column {
width: 31.33%;
background-color: green;
float: left;
margin: 0 1%;
}

/* Establishing a new block formatting
context in the last column */
.column:last-child {
float: none;
overflow: hidden;
}

Conclusion

--

--

--

Lead Software Developer @ Anarock, https://riteshkr.com

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ritesh Kumar

Ritesh Kumar

Lead Software Developer @ Anarock, https://riteshkr.com

More from Medium

CBEM with Selectors — Enhanced BEM CSS Methodology

The how and why of rem units in CSS

CSS Background Opacity Trick

CSS variables and UI improvement