What is the difference between using float and position in CSS?

What is the difference between using float and position in CSS?

Well, in fact, this proposition is wrong, only position is the location, float can not be said to be positioning, but you can say that the two layout methods are different.
There is no good or bad question between float and position, both of which can be used on demand, each with the desired effect.
Float literally means floating, which can be explained more appropriately in typography and the like. float allows elements to be drawn out of the document stream, which does not account for the flow of documents, and is typically the result of text wrapping around pictures in a picture-and-image mix. And float This is also the most used page layout method. However, it is important to note that clearing floats is something you may need to be aware of . And if you want to consider the old IE6 and the like, there will be some bugs such as the bilateral distance and so on.
and position as the name implies is positioning. He has the following properties: Static (Default), relative (relative positioning), absolute (absolute positioning), and fixed (stationary positioning). Where static and relative occupy the document flow space, they are not detached from the document. Absolute and fixed are out of document flow and do not occupy the document flow space.
Comparisons can be found that thebiggest difference between float and position is whether it occupies the document flow space problem. Although position has absolute and fixed, these two also do not occupy the attributes of the document flow, but these two do not fit to be used to layout the entire page. Why? Because then you have to set an xy coordinate for each element on the page to locate it.
The float layout is much more flexible. But some special places with relative and absolute layouts can achieve better results. Because absolute is based on the positioning of the parent element, when the parent element is relative, the absolute element is based on its positioning. For example, you can have a button always appear in the lower-right corner of an element.
When it comes to performance issues reflow, setting the element's position to absolute and fixed allows elements to be detached from the DOM tree structure, and the browser needs to render only that element and the element underneath it. This reduces the browser rendering time to some extent. So if it is to make JS animation, etc., with absolute or fixed positioning will be better.
Please add that the place is not good enough. It is not recommended to use position to lay out a large frame of the entire page, but it is recommended to use the default mode of float or document flow.

He Shijun

In the answer I have, I most agree with Tian Le. Here is a little supplement.
In the context of most web developers, the term "layout" is different from "typography". "Layout" tends to refer to macro-GUI zoning, such as double-column layouts or three-column layouts. From this point, float is actually not a property for "layout". Float corresponds to the traditional printing layout in the picture and text in a mixed arrangement of the surrounding. This is understandable, because CSS models and terminology are derived from traditional typography, and so are often far from the model of the computer GUI technology based on the component. In addition to float, another example is the collapse of the top and bottom margin in CSS, which is clearly intended to meet the needs of the paragraph layout. So, like float, margin collapse, etc., in the typical GUI technology is not. Also, in CSS box model, Width/height does not count as padding and border, many developers do not adapt to this point, which is actually the GUI's control thinking and CSS layout thinking conflict. The legacy of this conflict in browser technology implementation is the infamous "haslayout" of IE. The true meaning of the element "has layout" is that such an element corresponds directly to a control. It is also because IE is very naive in the implementation of the two contradictions in the direct combination of the model, resulting in a myriad of layout bugs.
Back to the CSS1 era of the web is still very humble, but with the rapid development of the World Wide Web interface has evolved rapidly, the original simple page-like banner pages quickly extinct, frameset because of the natural existence of a lot of problems also quickly quit the mainstream, CSS in the GUI layout is showing a flaw , developers are forced to use various trick. such as the historic table layout. Later, the table layout was despised, and developers gradually shifted to the float layout.
To say that float layout is popular, IE "work" must not. In IE, the element with layout does not surround the float element (because the element with layout is itself a control, it always maintains a rectangular area). This was originally a bug, but the effect was exactly the same as the need for a common double-column layout. In addition, the float element in IE will automatically open its parent container element (assuming that the container element is also has layout), which is actually a bug, but also coincides with the requirements of the module layout. Later the so-called Inline-block layout is actually the rationalization of these bugs.
Looking back today over the past more than 10 years of CSS practice, we can find thateither the float layout or the later Inline-block layout is actually trick. The so-called trick, is to move some characteristics of his use, in a very tortuous way to achieve the desired effect。 CSS as a style language, the ultimate source of maintainability, is that the code can clearly express the design intent. CSS trick, of course, is not a good fit for this.
So how can you really use CSS to express layouts? This, as Tian Le says, depends on "CSS3 evolution". such as multiple column, Flex box, grid layout, and so on. Which directly corresponds to the current float layout/inline-block layout to achieve the effect of the Flex box. Of course, given the compatibility issue (IE9 still does not support the Flex box module, IE10 is supported), we may continue to use the float layout for a long time, but we must always keep in mind that this is trick, which is workaround. If possible, it is best to introduce CSS frameworks such as scss/less to further abstract and decouple this layout trick.
Again position layout.position is actually closer to the layout property than float。 But the problem with position is that the so-called layout is to set the associations and constraints of each area (element), and the positioning is just the size of the position of the single element. To implement a layout, to manually set the parameters related to multiple positioning elements (such as the left column width:200px, right column left:200px), the equivalent of artificial size and position parameters calculated. This violates the dry principle and cannot really implement the association constraint. (If the left column is set to Max/min-width, the final actual width is not necessarily 200px, then the right column how to set left value?) And as a horizontal fixed width, vertical adaptive height of the absolute positioning element, how can we continue from the bottom of the next element? Unless we introduce JavaScript scripts to do the calculations. So there are a number of constraints to using the position layout, usually only those that are relatively isolated (such as the header footer) or the simpler layout that is fixed in the size of each area. As for the layout manager implemented in JavaScript, the position as the underlying technique for implementing the layout is no longer considered CSS (because you don't write CSS).

Tian Le

Let me add the question of float. The document flow that we often refer to is the default document flow. The basic display model block and inline are block wrap and continuous multiline models, which can be set to size, which cannot be sized (depending on the content to determine the size and the fold line).
However, we always encounter a fixed size, or fixed part size and does not fold the line of the scene, this time we will think of using float to do the layout, because float will trigger the shrink to fit characteristics, to determine the size according to the content, float does not produce a folding line, We use clear to manually simulate the folding line. This situation I think mainly because of inline-block compatibility scruples produced, in IE6 when it is not widely supported. Using position to implement such a layout requires a JavaScript fix, which is stronger than float in some scenarios, because the flow layout of the float simulation is not a multiline continuous layout, and some floating elements are often stuck in places where we do not want it to occur because of unexpected size changes. So we can see that a Web site like Pinterest uses JavaScript in conjunction with absolute position, and that the task of the layout engine is entirely given to JavaScript. From the point of view of the separation between performance and behavior it is not very reasonable, but from the result it is very satisfying.
However, what I mean by writing this paragraph is that many times we want to control the layout flow problem without the need for float and position implementations, but should be solved by displaying the model definition. For example, the current column layout, Flex box, and so on, are in this angle to solve the problems we encounter, they should be the positive solution. And perhaps the first reason we made this mistake was to start with the distrust of a display model like Inline-block.
Hopefully the evolution of CSS3 will allow us to rebuild this trust.
UPDATE: What I forgot to say is that if you do mobile Web development, then you know why float is rarely used on layouts. The Flex box in Android and IOS is already very stable, and the very low version (Android 1.6,ios 3) has been well supported, with these layout models being fairly reliable on a narrow and varied screen, and float in these cases is an endless problem. So I now believe in mobile first, and I believe that the web of the device can better promote the adoption of many new features of CSS3. For example, the new CSS3 background and box module is almost essential in mobile devices because background-size is required for Retina display, The Border-image is the best solution for complex buttons and panels. If you do mobile WEB, then you will fall in love with CSS3 's new features and enjoy the benefits of the standardized world it brings.

Source: >

What is the difference between using float and position in CSS?