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

Loat and position both do not have a good or bad problem, both on demand, 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 the biggest 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. Li Jin
Links: https://www.zhihu.com/question/19588854/answer/12309368
Source: Know
Copyright belongs to the author. Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.

Common denominator: Setting the float or absolute property on an inline element allows the element to be detached from the document stream (block-level elements are also available) and can be set to its wide height.

Different points:
Float will still occupy its place, and position will overwrite the other elements in the document flow.

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