. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.

Run-in

First, this property doesn’t work in Firefox. Word is that the spec for it isn’t well defined enough. To begin to understand it though, it’s like if you want a header element to sit inline with the text below it. Floating it won’t work and neither will anything else, as you don’t want the header to be a child of the text element below it, you want it to be its own independent element. In “supporting” browsers, it’s like this:

Flexbox

The display property is also used for new fangled layout methods like Flexbox.

.header {
  display: flex;
}

There are some older versions of flexbox syntax, so please consult this article for the syntax in using flexbox with the best browser support. Be sure to see this complete guide to Flexbox.

Flow-Root

The flow-root display value creates a new “block formatting context”, but is otherwise like block. A new BFC helps with things like clearing floats, removing the need for hacks to do that.

.group {
  display: flow-root;
}

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.

Desktop

Chrome	Firefox	IE	Edge	Safari
58	53	No	79	13

Mobile / Tablet

Android Chrome	Android Firefox	Android	iOS Safari
92	90	92	13.0-13.1

Grid

Grid layout will also be initially set by the display property.

body {
  display: grid;
}

Here’s our guide on Grid layout, which includes a browser support chart.

None

Entirely removes the element from the page. Note that while the element is still in the DOM, it is removed visually and any other conceivable way (you can’t tab to it or its children, it is ignored by screen readers, etc).

Table Values

There is a whole set of display values that force non-table elements to behave like table elements, if you need that to happen. It’s rare-ish, but it sometimes allows you to be “more semantic” with your code while utilizing the unique positioning powers of tables.

div {
  display: table;
  display: table-cell;
  display: table-column;
  display: table-colgroup;
  display: table-header-group;
  display: table-row-group;
  display: table-footer-group;
  display: table-row;
  display: table-caption;
}

To use, just mimic normal table structure. Simple example:

<div style="display: table;">

<div style="display: table-row;">

<div style="display: table-cell;">
      Gross but sometimes useful.
</div>

</div>

</div>

More Information

• MDN