The box model

Each element in HTML can be seen as a rectangular box. The CSS box model defines how much space each block element takes up.

It consists of four parts: content, padding, border, and margin.

What does * { box-sizing: border-box; } do?

By default, when we set the width of an element, it only applies to the content area — padding and border are added outside of that.

But if we use box-sizing: border-box, the width we set will include the content, padding, and border together, making the layout easier to control.

Nowadays, most developers use box-sizing: border-box globally because it makes element sizing more intuitive.

Describe floats and how they work.

Float is a CSS positioning property that was originally used to make text wrap around images.

However, it can cause some layout problems because floated elements are still part of the normal document flow — they can affect how other elements are positioned.

To fix this, we usually need to clear the float. There are two common ways to do that: one is to set the parent’s overflow to auto or hidden, and another is to use a pseudo-element like .clearfix::after with clear: both.