How does css float work

Sign Up. DigitalOcean home. Community Control Panel. Hacktoberfest Contribute to Open Source. By William Le Published on June 7, The two living species are You can also use float: left; to pin something to the other side: View the code on glitch. Conclusion The float property has a very special role in CSS.

About the authors. Still looking for an answer? I am working off of the CSS 2. I hope to explain. Before diving into floats, I'm going to describe some preliminaries about browser layout in general, and then move on to positioning floats.

As I explain, keep in mind that I'm describing a mental model for what a browser could do. Browsers are much more complicated than anything I say, but if you think of the browser the way I describe it, you'll come to the right conclusions. To turn this element tree into a picture, your browser proceeds in several stages: it generates boxes, links flows, and then computes dimensions and positions.

The end result of this process is a set of rectangles 4 [ 4 Of a few different sorts: text, images, backgrounds, borders, and so on. Let me discuss each phase briefly. Generating boxes : a box is the atomic particle of the rendering algorithm. Most boxes correspond to an HTML element, but the match isn't perfect. Some elements have display set to none , and do not generate boxes.

Here, a parent-child relationship between two elements becomes a sibling relationship between three boxes. Boxes come in various types, most importantly the block box corresponding to containers for text and the inline box corresponding to styled text. Linking flows : The web wasn't originally about apps—it was about text documents, and the design of CSS reflects this.

The most important way of laying out boxes is normal flow , used for text and other document-like things. Boxes that aren't in normal flow, like positioned or floating boxes, don't interact much with boxes in normal flow, and are treated like an exception to the textual norm. Boxes in normal flow are linked into flows. Each flow is a tree whose flow root is the root element of the page, or a box not in normal flow.

Within a flow tree, we can talk about the next or previous box, and when we do that, we mean that we skip any siblings which aren't in that flow. Computing dimensions : With flows linked, the dimensions of each box—width, height, margins, borders, and paddings—and its position on the page can be computed. Roughly speaking, we think of the browser as traversing flow trees from the top down, computing horizontal attributes along the way, then computing vertical attributes from the bottom up, and finally doing an in-order pass to compute positions.

The asymmetry between width and height is because we need the width to know how to break lines of text, and we need to know how the lines of text broke to compute the height. The simple down-up picture is not quite correct. It is ruined by concepts like the shrink-to-fit width. However, it is a handy guide. Since dimensions are computed using an top-down and bottom-up traversal of flow trees, a box's height generally shouldn't depend on the height of its parent, and its width generally shouldn't depend on the width of its children.

Predictably, both concepts create referential loops. For example, a box might have a percentage height, so it is dependent on its parent's height, but that parent needs the child's height to compute its own height. Drawing rectangles : Once every box's position and dimensions are known, it can be turned into a collection of rectangles, which are then drawn, in an order defined by the boxes' z-index property. The result is a picture that is shown to the user. Floats fit into the picture I just sketched in a few ways.

First, we must discuss how they are linked into flows. Then, we must discuss how their dimensions are computed. Finally, we must discuss how they are positioned. All boxes that float are flow roots. They leave the flow they would have been in had they not floated, and instead form their own, independent flow for their children.

This means that a float's dimensions can be computed independently of its surroundings. The dimensions of a float are mostly computed just like the dimensions of any other box, with a few twists:. I won't be describing margin collapsing, shrink-to-fit, or auto heights here. I would recommend setting a fixed width for floats, to avoid having to think about shrink-to-fit calculations, though shrink-to-fit is usually unsurprising.

You may unsubscribe from these communications at any time. For more information, check out our privacy policy. Written by Anna Fitzgerald. Imagine a print magazine. Flipping through the pages, you see text and images laid out in different ways. This makes it easier to see both the text and the images while limiting the amount of white space on the page. Like print designers, web designers need a solution for making text wrap around an element in a layout — this ensures they maintain the flow of the page while maximizing space.

That solution is the float property in CSS. The CSS float property controls the positioning and formatting of content on the page. Its most common use is to wrap text around images. However, you can use the float property to wrap any inline elements around a defined HTML element, including lists, paragraphs, divs, spans, tables, iframes, and blockquotes.

Notice that there are no property values for center, top, and bottom. If you're using the Bootstrap CSS framework to build your site, then there are additional values to create responsive floats.

Otherwise, you'll need to use media queries and set the specified screen width in pixels for when the element should float. In CSS, the float property specifies how an element should float.

The floated element will be removed from the normal flow of the page, but it will remain part of the flow — meaning, the element will be shifted to the left or right until it touches the edge of its container or another floated element. This is the key difference between the float property and the absolute position property in CSS. While floated elements are still a part of the flow of the page, elements using absolute positioning are not.

That means floated elements will affect the position of other elements and vice versa. Absolutely positioned elements, on the other hand, will not affect the position of other elements nor will other elements affect their position. Alternatively, it will run until it hits another floating element that has already hit the same wall. Here are two more things that happen to a floating element depending on what type of element is being kept floating:.

What you should really be thinking about is how the siblings after it are going to behave. The block elements will go a step further and will wrap themselves around a "Float" generously, even if it means kicking out their own child elements to make space for the "Float". Below are a blue box and after it is a red box of the same size with some child elements. Everything will be fine once the red box stops embracing the blue box and for that you can use overflow:hidden. See below how the red box behaves with overflow:hidden.