CSS float and clear properties - how to float a block and clear the float
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.
- IT / Misc 08.07.21 How to make a free translation for a website without an API, translate documents in Google Translate
- IT / Misc 06.07.21 How to make a subscription button on a website, a subscriber base and automatic mailing
- Food / Misc 06.07.21 How to quickly cook delicious fried pies with potatoes and onions
- IT / Misc 04.07.21 Caching - create, load and reset. Where to store the cache, methods and types of caching
- IT / Database 03.07.21 Custom NoSQL - storing data in files and not only in a database. Storing settings, small data and caching files