Let's learn Floats in CSS.
Tuesday, July 11, 2023
What is float?
Floats are used to alter the default flow of elements. It specifies how elements should float and position themselves to the right or left of their containers. It is usually applied to layouts and images. Multi-column layouts were commonly built with the float property before Flexbox and Grid. The main purpose of this was to float images within text blocks.
Float has two properties: clear and float.
Float determines whether or not the box should float.
By using the clear, elements after floating elements are avoided.
Syntax:
In CSS, some rules work in conjunction with others.
Float and Clear work well together.
In general, if you're using a float, you might want to consider using clear. Otherwise, your design might break.
Without `float` property Example:
How does float work?
Elements are only floated horizontally. Elements can therefore only float left or right; they cannot float up or down.
A floated element can be moved as far to the left or right as it can go. It simply indicates that a floating element could show up on the screen's extreme left or right.
The elements that come after it will move around the floating element.
The floating element won't affect elements that come before it.
When an image floats to the right, the surrounding text moves to the left, and when it floats to the left, the surrounding text moves to the right. Now let's apply float to an example. See the code below
Example with `float` property:
