The display property is the most important CSS property for controlling layout.

The display Property

The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

CSS Display/Visibility Properties

PropertyDescription
displaySpecifies how an element should be displayed
visibilitySpecifies whether or not an element should be visible

The position Property

The position property specifies the type of positioning method used for an element.
There are five different position values:
  • static
  • relative
  • fixed
  • absolute
  • sticky
Elements are then positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the position value.

CSS Overflow

The overflow property specifies whether to clip the content or to add scrollbars when the content of an element is too big to fit in the specified area.
The overflow property has the following values:
  • visible - Default. The overflow is not clipped. The content renders outside the element's box
  • hidden - The overflow is clipped, and the rest of the content will be invisible
  • scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content
  • auto - Similar to scroll, but it adds scrollbars only when necessary

The float Property

The float property is used for positioning and formatting content e.g. let an image float left to the text in a container.
The float property can have one of the following values:
  • left - The element floats to the left of its container
  • right - The element floats to the right of its container
  • none - The element does not float (will be displayed just where it occurs in the text). This is default
  • inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.

CSS Combinators

A combinator is something that explains the relationship between the selectors.
A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
There are four different combinators in CSS:
  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)