"I remember using 'float'..."

Floats

A floated element is removed from the normal document flow and pulled to the edge of the container.

The document flow around the space where the floated element now resides. If you float multiple elements in the same direction, they’ll stack alongside one another.

But we don’t always use floats in this way, even though it’s their original purpose.

** Difference between display inline, inline-block and block:

Compared to display: inline, the major difference is that display: inline-block allows to set a width and height to the element.

Also, with display: inline-block, the TOP and BOTTOM margins/paddings are respected, but with display: inline they are not.

Compared to display: block, the major difference is that display: inline-block does not add a line-break after the element, so the element can sit next to other elements.

Common pattern for centering an element on a page (using float):

Put your content within two nested containers. Then set the margin for the inner container (vertical and/or horizontal) and it will center in whichever direction we set the margin. It's called "doble container pattern".

Probably float is not as popular as it used to, as we now have flexbox. But it's useful for old codebases and also it's still the only way to send images to a position and wrap text around it.

For the next example we need to know what an pseudo-element is:

pseudo-element: Special selectors that target certain parts of the document.

These begin with a double-colon (::) syntax, though most browsers also support a single-colon syntax for backward compatibility.

The most common pseudo-elements are ::before and ::after, which are used to insert content at the beginning or end of an element.

.clearfix::after { 
 display: block; 
 content: " "; 
 clear: both; 
}

It’s important to know that the clearfix is applied to the element that contains the floats; A common mistake is to apply it to the wrong element, such as the floats or the container after the one that contains them.

Flexbox

Applying display: flex to an element turns it into a flex container, and its direct children turn into flex items.

By default, flex items align side by side, left to right, all in one row. The flex container fills the available width like a block element, but the flex items may not necessarily fill the width of their flex container. Flex items are all the same height, determined naturally by their contents.

* inline-flex: Kind of the same, but the container won't expand to fill the whole width.

* Trick to send the las element to the right in a nav menu:

nav ul {
  display: flex;
  background-color: firebrick;
  padding: 0.5em;
  justify-content: start;
  list-style-type: none;
  color: white;
}

.site-nav > li + li {
  margin-left: 0.5em;
}

.site-nav > .last-li {
  margin-left: auto;
}

Interesting flex properties:

• flex: is a shorthand for flex-grow, flex-shrink and flex-basis. Unlike most shorthand properties, these aren’t set to their initial values when omitted. Instead, the shorthand assigns useful default values for any of the three that you omit. flex-grow of 1, flex-shrink of 1, and a flex-basis of 0%.
• flex-basis: The flex basis defines a sort of starting point for the size of an element—an initial "main size." The flex-basis property can be set to any value that would apply to width, including values in px, ems, or percentages. Its initial value is auto, which means the browser will look to see if the element has a width declared. If so, the browser uses that size; if not, it determines the element’s size naturally by the contents. This means that width will be ignored for elements that have any flex basis other than auto.
• flex-grow: The remaining space (or remainder) will be consumed by the flex items based on their flex-grow values. If an item has a flex-grow of 0, it won’t grow past its flex basis. If any items have a non-zero growth factor, those items will grow until all of the remaining space is used up. An item with flex-grow: 2 will grow twice as much as an item with flex-grow: 1
• flex-shrink: After determining the initial main size of the flex items, they could exceed the size available in the flex container. Without flex-shrink, this would result in an overflow. The flex-shrink value for each item indicates whether it should shrink to prevent overflow. If an item has a value of flex-shrink: 0, it will not shrink. Items with a value greater than 0 will shrink until there is no overflow. An item with a higher value will shrink more than an item with a lower value, proportional to the flex-shrink values.

Positioning

The initial value of the position property is static.

When you change this value to anything else, the element is said to be "positioned". An element with static positioning is thus not positioned.

Positioning removes elements from the document flow entirely. This allows you to place the element somewhere else on the screen.

It can place elements in front of or behind one another, thus overlapping one another.

Posible values:

fixed: Fixed related to the viewport.

absolute: Works same as the fixed position, but instead of using the viewport as references, uses the closest edge of the containing block.

relative: Changes the element related to where it should be. Unlike fixed and absolute positioning, you cannot use top, right, bottom, and left to change the size of a relatively positioned element. Those values will only shift the position of the element up or down, left or right.

You can use top or bottom, but not both together (bottom will be ignored);

Likewise, you can use left or right, but not both (right will be ignored).

sticky: The element scrolls normally with the page until it reaches a specified point on the screen, at which point it will “lock” in place as the user continues to scroll. The common use-case for this is sidebar navigation.