CSS Box Model?

All HTML elements can be considered as boxes.
box model is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Content

The content of the box, where text and images appear.
the content area's size can be defined with the width, min-width, max-width, height, min-height, and max-height properties.

Clears an area around the content. The padding is transparent.
The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.

A border that goes around the padding and content.
The thickness of the borders are determined by the border-width and shorthand border properties.

Clears an area outside the border. The margin is transparent.
The size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties.

The CSS float property specifies how an element should float.
How do you float an image in CSS ?
```
img { float: right; }
```

Thefloat property is used for positioning and formatting content e.g. let an image float left or right to the text in a container.
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

inherit - The element inherits the float value of its parent
https://codepen.io/Meghakhatri/pen/zYaWJrL

When we use the float property, and we want the next element below (not on right or left), we will have to use the clear property.
The clear property specifies what should happen with the element that is next to a floating element.
clear Property
none - The element is not pushed below left or right floated elements. This is default
left- The element is pushed below left floated elements
right- The element is pushed below right floated elements
both- The element is pushed below both left and right floated elements
inherit- The element inherits the clear value from its parent

div1 {
  float: left;
}

div2 {
  clear: left;
}

download (1).png

inline-Displays an element as an inline element (like <span>). Any height and width properties will have no effect

https://codepen.io/Meghakhatri/pen/zYaWMMR
block-Displays an element as a block element (like <p>). It starts on a new line, and takes up the whole width

https://codepen.io/Meghakhatri/pen/YzvaRRg

inline-block-Displays an element as an inline-level block container. The element itself is formatted as an inline element, but you can apply height and width values
https://codepen.io/Meghakhatri/pen/vYrRzxE