Position, float, and clear finishing in CSS

Position:

Absolute	Creates an absolutely positioned element that is positioned relative to the first parent element other than the static anchor. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Fixed	Generates an absolutely positioned element that is positioned relative to the browser window. The position of the element is defined by the "left", "Top", "right" and "bottom" attributes.
Relative	Creates a relative positioned element, positioned relative to its normal position. Therefore, "left:20" adds 20 pixels to the left position of the element.
Static	The default value. No positioning, elements appear in the normal stream (ignoring top, bottom, left, right, or z-index declarations).
Inherit	Specifies that the value of the position property should be inherited from the parent element.

Float

The sum of the margin, border, padding, and content widths of the block-level elements in the horizontal direction of auto is equal to the parent element width. Using the Auto property changes the width of the parent element when the width of the element changes.

When the element is set to float, the width of the element becomes the contents of the content, the content is open, that is, the so-called parcel. Overflow | Position:absolute | Float:left/right can produce a wrapper, and the replacement element is also wrapped.

It is not possible to use width:auto on a wrapped element, to make the width of an element adaptable to the browser's breadth.

When the element floats, the parent element collapses and you can use clear to clear the float and let the parent元素就会包含它中间的浮动元素了

参考：CSS浮动

Clear

CSS clear Properties Specify whether an element is positioned next to the preceding floating element or must be moved below it (floating is cleared).
clear属性Can be used either for floating elements or for non-floating elements.

When applied to a non-floating block, it moves the bounding border of the element below the outer bounds of all relevant floating elements. This behavior can cause margin folding to not work.

When applied to a floating element, it moves the outer bounds of the element below the outer bounds of all relevant floating elements. This affects the layout of the subsequent floating elements, which cannot be positioned above the elements that precede it.

The relevant floating element to be cleared refers to the front float in the same block-level formatting context.

Note: If you want an element to include all the floating elements, you can either set the container to float or replace it with ::after pseudo-elements 设置clear属性 .

#container:after { content: ""; display: block; clear: both;}

There are 2 ways to clear, one is to use pseudo-class, the other is to use a clear element, so that the outer element will contain the floating element in it.
Margin Merge:

Margin merging means that when two vertical margins meet, they form an outer margin.

The height of the merged margin is equal to the greater of the two of the height in which the merged margins occur.

Note: Margin merges occur only in the vertical margins of a block box in a normal document flow. Margins between inline boxes, floating boxes, or absolute positioning are not merged.

Reference: CSS margin Merge

Reference article:

This is probably the most comprehensive CSS adaptive layout summary in history.

Https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear

Http://sonspring.com/journal/clearing-floats

http://yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/

Position, float, and clear collation in CSS