# How browsers position floats

DevFeed: [How browsers position floats](<https://devfeed.tech/articles/how-browsers-position-floats-35519.md>)

Original publisher: [Read original article](<https://meowni.ca/posts/float-layout/>)

Author: Monica Dinculescu

Published: 2018-04-11T00:00:00Z

Content type: tutorial

Language: en

Sources: [Monica Dinculescu](<https://devfeed.tech/sources/monica-dinculescu.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [browsers](<https://devfeed.tech/topics/browsers.md>), [Algorithm](<https://devfeed.tech/topics/algorithm.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [algorithm](<https://devfeed.tech/tags/algorithm.md>), [browsers](<https://devfeed.tech/tags/browsers.md>), [css](<https://devfeed.tech/tags/css.md>), [demo](<https://devfeed.tech/tags/demo.md>), [flexbox](<https://devfeed.tech/tags/flexbox.md>), [property](<https://devfeed.tech/tags/property.md>)

## AI overview

This article explains how browsers position CSS floats using the float positioning algorithm, including how left and right floats relate to the line box and surrounding non-float content. It also recommends flexbox or CSS grid for most layouts and links to an interactive demo.

## Source excerpt

When you have a float CSS property on a box (with a value different than none), this box must be laid out according to the float positioning algorithm. Loosely, it says: if the box has float:left, the box is positioned at the beginning of the line box if the box has float:right, the box is positioned at the end of the line box text (and more generally anything within the normal, non-floaty flow) is laid out along the edges of the floating boxes the clear property changes the floating behaviour. Anyway, in general you'll have a better time if you use a flexbox or CSS grid instead of floats, because floats are quirky and have strange edge cases, but if you were ever curious about how the algorithm would choose where to position different floats, here's a demo (which you can also play with directly on glitch):