Display, Float, Clear and Position

1. display Property

The display property determines how an element is displayed on the web page.

Display Usage:

• block: The element is displayed as a block-level element (e.g., <div>, <p>). It starts on a new line, takes up the full width available, and can contain other block and inline elements.

span {
    display: block;
}
/* span is an inline element and we are changing its behavior to be blocked */

• inline: The element is displayed as an inline-level element (e.g., <span>, <a>). It does not start on a new line and only takes up as much width as necessary.

p {
    display: inline;
}
/* div is a blocking element and we are changing its behavior to be inline */

In inline value, yes it will give others space to take after the content ends, but we cannot set width height margin-top margin-bottom padding-top padding-bottom float clear properties since it is not respected while the element is inline, that is why we use inline-block if want to set these properties.

• inline-block: The element is displayed as an inline-level element but can have width and height etc. set.

div {
    display: inline-block;
    width: 100px;
    height: 100px;
}

• none: The element is not displayed at all (removed from the document tree).

.hidden {
    display: none;
}

• flex: The element becomes a flex container, allowing flexible layouts using flexbox.

.container {
    display: flex;
}

The flex value will allow other elements to come just after them if there is enough space for them. It is almost similar to inline and inline-block.

• grid: The element becomes a grid container, enabling grid-based layouts.

.container {
    display: grid;
}

The grid value is usually comes in help when we are trying to make a grid-like layouts. Such as your gallery layout or the YouTube's home page's videos layout.

2. float Property

The float property allows an element to be taken out of the normal document flow and be positioned to the left or right of its container, allowing text and inline elements to wrap around it.

Float Usage:

• left: Floats the element to the left.

img {
    float: left;
    margin: 0 10px 10px 0;
}

• right: Floats the element to the right.

img {
    float: right;
    margin: 0 0 10px 10px;
}

• none: The element does not float (default value).

img {
    float: none;
}

The float property is helpful when we are trying to make a newspaper-like structure, there's an image that is on the left and the texts starts after the image ends. For example:

3. clear Property

The clear property is a pair of float and its used to control the behavior of floating elements, ensuring that an element is not affected by floating elements around it.

Clear Usage:

• left: The element must be moved below any left-floating elements.

.clear-left {
    clear: left;
}

• right: The element must be moved below any right-floating elements.

.clear-right {
    clear: right;
}

• both: The element must be moved below any floating elements on either side.

.clear-both {
    clear: both;
}

• none: The element is not affected by floating elements (default value).

.clear-none {
    clear: none;
}

4. position Property

The position property specifies the type of positioning method used for an element. It affects how the element is positioned in the document flow.

Position Usage:

• static: The default positioning, the element is positioned according to the normal document flow (default value).

div {
    position: static;
}

• relative: The element is positioned relative to its normal position. We can use top, right, bottom, and left properties to adjust its position.

div {
    position: relative;
    top: 10px;
    left: 20px;
}

When we define any element to be relative, it sits-up from its position but it does not leave any free space for other elements. A simple example: A parking spot on a company parking lot that is reserved for the companies owner. No one else can park there except for the person its reserved for.

• absolute: The element is positioned relative to its nearest positioned ancestor (not static). If no such ancestor exists, it is positioned relative to the initial containing block (html).

div {
    position: absolute;
    top: 50px;
    right: 0;
}

When we define any element to be absolute, it sits-up from its position and leave its space from the webpage, making other elements to be forced to take its place. For a simple example: There's a parking spot taken by a car(1), it was taking that parking spots place, now it has left the spot making the spot open for other cars to park. Now any other car(2) can come and park there, just like this short example the absolute value works.

• fixed: The element is positioned relative to the browser window. It stays in the same position even if the page is scrolled.

div {
    position: fixed;
    bottom: 0;
    right: 0;
}

The fixed value is usually used for making a "navigation bar" or a "contact us" button as you must have seen this in many websites.

• sticky: The element is treated as relative until it crosses a specified point in the viewport, after which it is treated as fixed.

div {
    position: sticky;
    top: 0;
}

While defining the sticky value we always have to give a top property else it will not work as you will be expecting it to work.

Example with these properties:

<style>
  .static {
      position: static;
      background-color: lightblue;
  }

  .relative {
      position: relative;
      top: 20px;
      left: 20px;
      background-color: lightcoral;
  }

  .absolute {
      position: absolute;
      top: 40px;
      left: 40px;
      background-color: lightgreen;
  }

  .fixed {
      position: fixed;
      bottom: 10px;
      right: 10px;
      background-color: lightyellow;
  }

  .sticky {
      position: sticky;
      top: 0;
      background-color: lightgray;
  }
</style>

<div class="static">Static positioned element.</div>
<div class="relative">Relative positioned element.</div>
<div class="absolute">Absolute positioned element.</div>
<div class="fixed">Fixed positioned element.</div>
<div class="sticky">Sticky positioned element.</div>

Understanding these properties allows for precise control over element layout and positioning, crucial for creating responsive and well-structured web pages.