Register to get access to free programming courses with interactive exercises

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.


Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

For full access to the course you need a professional subscription.

A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.

Get access
130
courses
1000
exercises
2000+
hours of theory
3200
tests

Sign up

Programming courses for beginners and experienced developers. Start training for free

  • 130 courses, 2000+ hours of theory
  • 1000 practical tasks in a browser
  • 360 000 students
By sending this form, you agree to our Personal Policy and Service Conditions

Our graduates work in companies:

<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.bookmate">Bookmate</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.healthsamurai">Healthsamurai</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.dualboot">Dualboot</span>
<span class="translation_missing" title="translation missing: en.web.courses.lessons.registration.abbyy">Abbyy</span>
Suggested learning programs
profession
Development of front-end components for web applications
10 months
from scratch
Start at any time
profession
Layout with the latest CSS standards
5 months
from scratch
under development
Start at any time

Use Hexlet to the fullest extent!

  • Ask questions about the lesson
  • Test your knowledge in quizzes
  • Practice in your browser
  • Track your progress

Sign up or sign in

By sending this form, you agree to our Personal Policy and Service Conditions
Toto Image

Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.