float

The property helps to "wrap" blocks of text.

        
          
          .block__img {  float: right;}
          .block__img {
  float: right;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

Sometimes when laying out a block, it is necessary for the text next to the image to occupy all remaining space, and after the image to span the entire width of the block. float was created for such situations. The element for which this property is specified partially exits the flow: all block context elements written in the code after the element with float take its place, while inline context elements "wrap" around it.

        
          
          .element {  float: left;}
          .element {
  float: left;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

In the stylesheet, we write the selector of the element we want to "wrap" and specify one of the three values of the property:

• left — the element will be positioned at the left edge of the parent block.
• right — the element will be positioned at the right edge of the parent block.
• none — the default value, the element will remain in the flow.

If we set the float property to some element and write a paragraph of text next to it, and then add another paragraph below that is intended to be independent, the second paragraph can still "wrap" around the element with float. Therefore, we need to stop the influence of this property in order to return to the normal flow of the document. For this, we can use the so-called "clearfix." After the element on which we want to stop wrapping, we can insert an empty element, usually with the class clearfix, and specify the clear property:

        
          
          .clearfix {  clear: both;}
          .clearfix {
  clear: both;
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

We can also avoid inserting a separate element in the markup and use a pseudo-element ::after — this option is preferred.

Several years ago, a similar purpose was served by the value flow-root for the display property — it somewhat isolates the wrapping. It is enough to apply it to the block that contains an element with float — and the influence of float will not extend outside this block. Relative to neighbors, it will behave like an ordinary block element with static positioning.

Also, to achieve similar isolation, one can set the property overflow: hidden to the block. The difference is that flow-root allows using the property overflow: visible.

💡 By applying float to an element, we implicitly make it a block.

In practice

Copy the link "In practice"

Advice 1

Copy the link "Advice 1"

🛠 float is not intended for creating grids or table layouts! There was no other way to split content into columns and place them next to each other. But now there are flexes and grids, and float is used only for "wrapping".