What methods of blocking (clearing) do you know and in what situations are they used?

Clearance methods:

• clear: left; — prevents wrapping on the left. Used when the element should not be positioned next to floated elements on the left.
• clear: right; — prevents wrapping on the right. Used when the element should not be positioned next to floated elements on the right.
• clear: both; — prevents wrapping on both sides. Used when the element should not be positioned next to any floated elements. This is the most common option.
• clear: none; (default value) — allows wrapping.

Usage:

• To prevent "collapse" of the parent container: If all child elements of the parent are floated and wrap around each other (have float), the parent container loses its height and collapses. Adding an element with clear: both; after the floating elements inside the parent or using a pseudo-element ::after with clear: both; solves this problem.
• For proper positioning of elements after floating: If normal (non-floating) elements should be placed below the floated elements rather than next to them.
• To create "rows" or "lines" in floating layouts: When elements with float should be arranged in multiple rows, clear is used to start a new row.

Example of using the ::after pseudo-element for clearing:

.clearfix::after {
  content: ""; /* Important for displaying the pseudo-element */
  display: table; /* Or block */
  clear: both; /* Main property for clearing */
}

This clearfix class is then applied to the parent element containing the floated child elements.