This content originally appeared on DEV Community and was authored by Abdullah Numan
In CSS, floats are created by setting the float property of an element to a value other than none.
div {
float: left;
}
Floating an image with text wrapped around it, is a common implementation of the float property. An element can be floated right or left, with assignable values of right, left, inline-start and inline-end.
Floating an element creates a Block Formatting Context on the element, takes the element out of the normal flow of the document, and wraps around itself line boxes that come after the element in the DOM tree.
Items floated to the left, move to the left edge of its container and those floated to the right move to the right edge.
Multiple items floated to the same edge follow the order in which they appear in the DOM tree, with the first one moved to the edge, then the next one beside it, and so on -- ending up with the last one farthest from the edge. If there is no space to accommodate all floated items, they move to the next line.
In almost all cases, using a float also involves clearing it from the items that come after itself, because line boxes (e.g. text nodes) wrap around floated items. Clearing a float from an element results in moving the element below the float.
Floats, along with several clearing techniques, were used to create multi-column layouts, but flex and grid items are used for this purpose.
References
This content originally appeared on DEV Community and was authored by Abdullah Numan
Abdullah Numan | Sciencx (2022-06-23T12:33:27+00:00) Describe floats and how they work.. Retrieved from https://www.scien.cx/2022/06/23/describe-floats-and-how-they-work/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.