May 03, 2021 CSS
The CSS float property defines which direction an element floats, and the floating element generates a block-level box until the outer edge of the block-level box touches the containing box or other floating box.
Float of CSS causes elements to move left or right, and the elements around them are rearranged.
Float is often used for images, but it is just as useful when layout.
The horizontal direction of the element floats, meaning that the element can only move left and right, not up and down.
A floating element moves as far left or right as possible until its outer edge touches the border that contains the box or another floating box.
The element after the floating element will surround it.
Elements before floating elements will not be affected.
If the image floats to the right, the following text stream wraps to its left:
If you put a few floating elements together, if there is space, they will be adjacent to each other.
Here, we use the float property for the gallery:
After the element floats, the surrounding elements are rearranged, and to avoid this, use the clear property.
The clear property specifies that floating elements cannot appear on either side of an element.
Use the clear property to add a gallery to the text:
Tip: If you would like to learn more about the clear property, please visit the CSS reference manual on this site: CSS clear property.
Add borders and margins to the image and float to the right of the paragraph
Let's add borders and margins to the image and float to the right of the paragraph
The title and picture float to the right
Let the title and picture float to the right.
Let the first letter of the paragraph float to the left
Change the style so that the first letter of the paragraph floats to the left.
Create a Web page without a table
Use float to create a page header, footer, left content, and main content.
The numbers in the "CSS" column indicate that the property is defined by different CSS versions (CSS1 or CSS2).
Attributes | describe | value | CSS |
---|---|---|---|
clear | Specifies that there is no floating element around the elements. |
left
right both none inherit |
1 |
float | Specifies whether a box (element) can float. |
left
right none inherit |
1 |
CSS Reference Manual: CSS float property