CSS float and clear properties - how to float a block and clear the float

05.08.18 IT / CSS 4549

When placing elements on a page, it is often necessary to make the flow around one block over another. To do this, CSS styles correctly there is a special property - float . It is usually not clear to a novice developer how this property works, but with practice it gets fixed. It is important to understand that after applying a property, it may also be necessary to clean up the float so that other elements are not floated.

A bit of background. Previously, tables were mostly used to place one element to the left or right of another. But this approach is outdated, layout began to be done using div blocks, and therefore a new property was invented for them - float .

What values ​​does this property have? There are not many of them:

• left is a keyword indicating that the element should float to the left of its containing block;
• right is a keyword indicating that the element should float to the right side of its containing block;
• none is a keyword indicating that the element should not float;
• inherit - the parent value is inherited.

As mentioned above, after applying the float property, you may need to undo its effect - clear the float . This can be done using the clear property, it was created for this purpose.

What values ​​can be specified for clear ? Let's see below:

• left - Indicates that the element will be moved down to clear wrap around the left side;
• right - Indicates that the element will be moved down to clear wrap around the right side;
• both - indicates that the element is being moved down, and the wrapping on both the left and right sides will be cleared;
• none - does not cancel wrapping, may be needed in some cases;
• inline-start - Indicates that the element is moved down to clear wrap at the start of its containing block, that is, left wrap will be cleared for text with left-to-right text direction and right wrap for text with direction right-to-left text;
• inline-end - the same as the previous value, but vice versa.

So we have seen how to wrap an element to the left or right, and how to clear wrap using a custom property.