CSS positioning and floating

The basic idea of positioning is simple, allowing you to define where the element box should appear relative to its normal position, or relative to the parent element, another element, or even the location of the browser window itself. Obviously, this is a very powerful and surprising feature. It should not be surprising to know that user-agent support for targeting in CSS2 is far better than support for other areas.

Everything is a box! Inline and block-level elements are boxes, and display can change the type of box

None	This element is not displayed.
Block	This element is displayed as a block-level element with a newline character before and after this element.
Inline	Default. This element is displayed as an inline element with no line break before or after the element.

1, positioning position

(1) The static element box is generated normally. Block-level elements generate a rectangular box that, as part of the document flow, creates one or more row boxes in the parent element of the inline element.

(2) The relative element box offsets a distance. The element still retains its pre-positioned shape, and the space it originally occupies remains.

Relative positioning, the original point of the default reference parent is the original point, which is positioned with TRBL, and the original point of the current level is positioned according to the original point of the parent content area when there are CSS properties such as padding in the parent level.

Http://www.w3cfuns.com/thread-258-1-1.html

(3) The absolute element box is completely removed from the document flow and is positioned relative to its containing block. The containing block may be another element in the document or an initial containing block. The space that the element originally occupied in the normal document flow is closed as if the element did not exist. The element is positioned to generate a block-level box, regardless of what type of box it was generated in the normal flow.

Absolute positioning, the default reference to the browser's upper-left corner, with top, right, BOTTOM, left (hereinafter referred to as TRBL) for positioning.

If the parent exists and position is set, the upper-left corner of the parent is referenced

(4) The Fixed element box behaves like the position is set to absolute, but its containing block is the window itself.

2. Floating

The floating box can be moved left or right until its outer edge touches the border of the containing box or another floating box.

Http://www.w3school.com.cn/css/css_positioning_floating.asp

3. Clear floating

Clear:both;

Clear effect (effect on next element)

CSS positioning and floating