CSS Basics: Dive into the Float Model – Unveiling Secrets to Elevate Your Web Design Game

The CSS Float Model Explained

Normally, block elements are not placed side by side, but rather one below the other. They always start on a new line and occupy the full width of their parent block. If you would like to place multiple block elements side by side, you can use the CSS float property to do so.

Floated elements, or floats for short, are different from anything else in CSS. Floats are technically block elements, but they behave like inline elements in the sense that they (often) don't start on a new line. The rest of the content will try to flow around it.

The value shown in orange is the standard use of the CSS float property.

The functionality of the CSS float property is not really particularly complicate. But when floating elements, problems can arise that are not always easy to understand, especially for beginners.

The float property is used to specify the direction in which an element is shifted. The following values are allowed:

• With float: left, the element is shifted to the left inner edge of its parent element. If there is enough space, subsequent elements are placed on the right side of the element until the space in the parent element is filled. Otherwise, further elements will slide down one line.

• With float: right, the element is shifted to the right inner edge of its parent element. Subsequent elements are only positioned on the left side of the element if they also have the float: right property.

• float: none is the default behavior of an HTML element. If it is not explicitly specified in the CSS code, elements do not float. With float: none, any inherited behavior can be reset to the default. The element starts again in a new line if it is a block level element. Inline elements start at the normal position in the body text.

• With float: inherit, the value of the float property is inherited from the parent element.

Alternative to float

Use display: inline-block to create a box that combines the behavior of inline and block elements. Inline elements are placed on the baseline like text. They have spacing as the words in the text. The margin and padding properties can be used to customize the spacing of the elements.

/* image container */
figure {
  /* display like an inline element */
  display: inline-block;
}


/* define spacing and width */
figure, figcaption {
  /* no outer outer spacing, all sides */
  margin: 0;

  /* no inner spacing, all sides */
  padding: 0;
  /* define width */
  width: calc(33% - 0.25em);
}


/* set image size */
figure img {
  /* image width: 100% of figure */
  width: 100%;
}

<div class="inline-pics">
<figure>
<img src="/images/godafoss.jpg" alt="Godafoss, Island">
<figcaption>Bildquelle: Pixabay.com<br>Godafoss, Island</figcaption>
</figure>

<figure>
<img src="/images/island.jpg" alt="Island">
<figcaption>Bildquelle: Pixabay.com<br>Island</figcaption>
</figure>

<figure>
<img src="/images/wasserfall.jpg" alt="Wasserfall">
<figcaption>Bildquelle: Pixabay.com<br>Wasserfall</figcaption>
</figure>
</div>

This background       represents the screen and is not part of the sample code.

Did you notice the spacing between the three images? Although the inner and outer spacing is set to 0, there is a small gap between the images. This is because there is a space between the <figure> tags. This is comparable to the spaces that separate the words in a text.