Floating elements — CSS: Positioning

Now that we've figured out the position rule, we can move on to the next type of document flow – floating flow. Its characteristic feature is wrapping elements. This is easy to understand if you look at a magazine layout. The most common magazine layout is where there's a picture inside the text, but not just between lines of text, but to the left or right of the text. The text in this case is wrapped around the image, hence the name.

In order to change the flow to float, we use the CSS float rule, which takes two basic values:

• left
• right

It is clear from these values that the element can be wrapped both left and right. Try changing the float: left rule in the above example to float: right to see the difference. You will also need to mirror the margins so that it's displayed properly. I.e., change margin-right to margin-left.

When you use floating flow, the browser does something unusual; the block is actually pulled from the normal document flow, just like with absolute positioning. But why isn't the block next to the floating element hitting it? Actually, it does, but the text knows that there is a floating element next to it, so the browser automatically shift the text to the border of the floating element.

This effect is easy to see if you use the opacity property, which sets the transparency of the element, and the indentation inside the block.

Until recently, float was used as the main tool for designing website layouts. It was using this rule that we could create various layouts with 2-3 columns. Since float was not originally created for these purposes, this process caused quite a few problems. With the advent of flex and grid, there's no longer any need to use floating flow, so it can be used for the original purpose - laying out texts.

An interesting feature of the float property is that when it gets used, any element will automatically become a block element. This is important if the property is used on inline elements, such as span. After setting the float value to an element, you can set the width and height values without additional use of the display property.

float can cause a lot of headaches when it comes to website layout. Often we want only individual elements to wrap around the block, not all the ones from the flow. For example, let's take three block elements, two of which should be on the same line, and the third should be below them. Let's try to use the float property.

To move the footer under the main content of the site, we use a so-called "floating flow clear". After the clearing, all the blocks will ignore the floating flow, and the underlying elements will start behaving according to the normal document flow unless they have a different behavior specified.

To clear a floating thread, we use the clear property, which can take the following values:

• left
• right
• both. This value is the most often used

There are several basic ways in which clear is implemented:

1. Using the clear: both rule for the element you want to clear
2. Creating an empty block element, then specifying the clear: both rule for it
3. Using the clearfix method. To do this, specify the clear: both rule in the after pseudo-element

<style>
  .main::after {
    content: "";
    clear: both;
    display: table;
  }

  .img-float {
    float: left;
  }
</style>

<div class="main">
    <img src="#" class="img-float">
    <p>Text</p>
</div>

<footer></footer>

The footer block will now be located below the main block.

The most common use of clear is to create an empty block element with the clear: both rule. The second option is to use the clear rule on the block you want to clear.